Vue 에서 Cookie 작업 인 스 턴 스 를 어떻게 사용 합 니까?

안녕하세요,회사 가 서둘러 프로젝트 를 진행 하 느 라 한동안 새로운 글 을 발표 하지 못 했 습 니 다.오늘 은 여러분 과 쿠키 사용 에 대해 이야기 하고 싶 습 니 다.마찬가지 로 이 쿠키 의 사용 방법 은 제 가 회사 의 프로젝트 에서 추출 한 것 입 니 다.여러분 이 알 아 볼 수 있 도록 최대한 상세 하 게 쓰 겠 습 니 다.쓸데없는 말 은 그만 하고 우 리 는 바로 본론 으로 들 어 갔다.
1.쿠키 설치
Vue 2.0 에서 이 건 설치 할 필요 가 없 을 것 같 습 니 다.프로젝트 를 만 들 때 npm install 이 설치 되 어 있 기 때 문 입 니 다.나의 설치 방식 은 다음 과 같다.

#      vue-cli
$ npm install --global vue-cli
#        webpack       
$ vue init webpack my-project
#     ，  
$ cd my-project
$ npm install

이것 은 제 가 만 든 디 렉 터 리 구조 입 니 다.여러분 이 보 셔 도 됩 니 다.

프로젝트 구조
2.쿠키 포장 방법
util 폴 더 에서 util.js 파일 을 만 든 다음 코드 를 올 립 니 다.

//  cookie、
export function getCookie(name) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
 if (arr = document.cookie.match(reg))
  return (arr[2]);
 else
  return null;
}

//  cookie,   vue        
export function setCookie (c_name, value, expiredays) {
 var exdate = new Date();
 exdate.setDate(exdate.getDate() + expiredays);
 document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};

//  cookie
export function delCookie (name) {
 var exp = new Date();
 exp.setTime(exp.getTime() - 1);
 var cval = getCookie(name);
 if (cval != null)
  document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};

3.HTTP 에서 Cookie 를 백 스테이지 로 전송
이 점 에 대해 설명 이 필요 합 니 다.여기 서 사용 하 는 것 은 axios 로 HTTP 데 이 터 를 전송 하 는 것 입 니 다.axios 를 더욱 잘 사용 하기 위해 서 는 util 폴 더 에서 http.js 파일 을 만 든 다음 에 GET,POST 등 방법 을 봉인 합 니 다.코드 는 다음 과 같 습 니 다.

import axios from 'axios' //  axios
import {getCookie} from './util' //         util.js  ，   getCookie  

// axios   
axios.defaults.timeout = 5000; 
axios.defaults.baseURL = 'http://localhost/pjm-shield-api/public/v1/'; //        

// http request    ，    ，      Cookie    
axios.interceptors.request.use(
  config => {
    const token = getCookie('session'); //  Cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded' //      
    };
    if (token) {
      config.params = {'token': token} //       ，             
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);


// http response    
axios.interceptors.response.use(
  response => {
//response.data.errCode        ，    2，  Cookie  ，        ，              
    if(response.data.errCode == 2) {
      router.push({
        path: '/login',
        query: {redirect: router.currentRoute.fullPath} //       
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error.response.data)
  });

export default axios;

/**
 * fetch     
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {

  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}

/**
 * post     
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
}

/**
 * patch     
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
}

/**
 * put     
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
  })
}

4.로그 인 구성 요소 에서 Cookie 사용
로그 인 구성 요 소 는 Element-ui 레이아웃 을 사용 하기 때문에 Element-ui 에 익숙 하지 않 은 친구 들 에 게 악 보 를 할 수 있 습 니 다.뒤에 우 리 는 그것 을 어떻게 사용 하여 구 조 를 진행 하 는 지 설명 할 것 이다.로그 인 구성 요소 의 코드 는 다음 과 같 습 니 다:

<template>
 <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
      class="demo-ruleForm login-container">
  <h3 class="title">      </h3>
  <el-form-item prop="u_telephone">
   <el-input type="text" v-model="account.u_telephone" auto-complete="off" placeholder="     "></el-input>
  </el-form-item>
  <el-form-item prod="u_password">
   <el-input type="password" v-model="account.u_password" auto-complete="off" placeholder="     "></el-input>
  </el-form-item>
  <el-form-item style="width:100%;">
   <el-button type="primary" style="width:100%" @click="handleLogin" :loading="logining">  </el-button>
  </el-form-item>
 </el-form>
</template>

<script>
 export default {
  data() {
   return {
    logining: false,
    account: {
     u_telephone:'',
     u_password:''
    },
    //      
    rules: {
     u_telephone: [
      {required: true, message:'     ',trigger: 'blur'}
     ],
     u_password: [
      {required: true,message:'     ',trigger: 'blur'}
     ]
    }
   }
  },
  mounted() {
   //   
  },
  methods: {
   handleLogin() {
    this.$refs.AccountFrom.validate((valid) => {
     if(valid) {
      this.logining = true;
//   'm/login'       ，this.account   
      this.$post('m/login',this.account).then(res => {
       this.logining = false;
       if(res.errCode !== 200) {
        this.$message({
         message: res.errMsg,
         type:'error'
        });
       } else {
        let expireDays = 1000 * 60 * 60 ;
        this.setCookie('session',res.errData.token,expireDays); //  Session
        this.setCookie('u_uuid',res.errData.u_uuid,expireDays); //      
        if(this.$route.query.redirect) {
         this.$router.push(this.$route.query.redirect);
        } else {
         this.$router.push('/home'); //       
        }
       }
      });
     } else {
      console.log('error submit');
      return false;
     }
    });
   }
  }
 }
</script>

5.경로 에서 token 저장 이 존재 하지 않 는 지 확인 하고 존재 하지 않 으 면 로그 인 페이지 로 갑 니 다.
router-index.js 에 경 로 를 설정 합 니 다.코드 는 다음 과 같 습 니 다.

import Vue from 'vue'
import Router from 'vue-router'
import {post,fetch,patch,put} from '@/util/http'
import {delCookie,getCookie} from '@/util/util'

import Index from '@/views/index/Index' //  
import Home from '@/views/index/Home' //  
import right from '@/components/UserRight' //  
import userlist from '@/views/user/UserList' //    
import usercert from '@/views/user/Certification' //    
import userlook from '@/views/user/UserLook' //    
import usercertlook from '@/views/user/UserCertLook' //      

import sellbill from '@/views/ticket/SellBill' 
import buybill from '@/views/ticket/BuyBill'
import changebill from '@/views/ticket/ChangeBill' 
import billlist from '@/views/bill/list' 
import billinfo from '@/views/bill/info' 
import addbill from '@/views/bill/add' 
import editsellbill from '@/views/ticket/EditSellBill' 

import ticketstatus from '@/views/ticket/TicketStatus' 
import addticket from '@/views/ticket/AddTicket' 
import userinfo from '@/views/user/UserInfo' //    
import editpwd from '@/views/user/EditPwd' //    

Vue.use(Router);

const routes = [
 {
  path: '/',
  name:'  ',
  component:Index
 },
 {
  path: '/',
  name: 'home',
  component: Home,
  redirect: '/home',
  leaf: true, //      
  menuShow: true,
  iconCls: 'iconfont icon-home', //    
  children: [
   {path:'/home', component: right, name: '  ', menuShow: true, meta:{requireAuth: true }}
  ]
 },
 {
  path: '/',
  component: Home,
  name: '    ',
  menuShow: true,
  iconCls: 'iconfont icon-users',
  children: [
   {path: '/userlist', component: userlist, name: '    ',  menuShow: true, meta:{requireAuth: true }},
   {path: '/usercert', component: usercert, name: '      ', menuShow: true, meta:{requireAuth: true }},
   {path: '/userlook', component: userlook, name: '      ', menuShow: false,meta:{requireAuth: true}},
   {path: '/usercertlook', component: usercertlook, name: '      ', menuShow: false,meta:{requireAuth: true}},
  ]
 },
 {
  path: '/',
  component: Home,
  name: '    ',
  menuShow: true,
  iconCls: 'iconfont icon-books',
  children: [
   {path: '/sellbill',  component: sellbill,  name: '    ', menuShow: true, meta:{requireAuth: true }},
   {path: '/buybill',  component: buybill,  name: '    ', menuShow: true, meta:{requireAuth: true }},
   {path: '/changebill', component: changebill, name: '    ', menuShow: true, meta:{requireAuth: true }},
   {path: '/bill/editsellbill', component: editsellbill, name: '      ', menuShow: false, meta:{requireAuth: true}}
  ]
 },
 {
  path: '/bill',
  component: Home,
  name: '    ',
  menuShow: true,
  iconCls: 'iconfont icon-books',
  children: [
   {path: '/bill/list',  component: billlist,  name: '      ', menuShow: true, meta:{requireAuth: true }},
   {path: '/bill/info',  component: billinfo,  name: '     ', menuShow: false, meta:{requireAuth: true }},
   {path: '/bill/add',  component: addbill,  name: '      ', menuShow: true, meta:{requireAuth: true }}

  ]
 },
 {
  path: '/',
  component: Home,
  name: '    ',
  menuShow: true,
  iconCls: 'iconfont icon-setting1',
  children: [
   {path: '/userinfo', component: userinfo, name: '    ', menuShow: true, meta:{requireAuth: true }},
   {path: '/editpwd', component: editpwd, name: '    ', menuShow: true, meta:{requireAuth: true }}
  ]
 }
 ];

const router = new Router({
  routes
});

비고:경로 에 있 는 meta:{requireAuth:true}을 주의 하 십시오.이 설정 은 주로 아래 인증 을 위 한 서비스 입 니 다.
if(to.meta.requireAuth),이 코드 는 requireAuth:true 가 있 으 면 사용자 가 존재 하 는 지 여 부 를 판단 한 다 는 뜻 입 니 다.
존재 한다 면 다음 작업 을 계속 수행 하고 존재 하지 않 는 다 면 클 라 이언 트 의 쿠키 를 삭제 하 는 동시에 페이지 가 로그 인 페이지 로 넘 어 갑 니 다.코드 는 다음 과 같 습 니 다.

//               token    ，          
router.beforeEach((to, from, next) => {
 if(to.meta.requireAuth) {
  fetch('m/is/login').then(res => {
   if(res.errCode == 200) {
    next();
   } else {
    if(getCookie('session')) {
     delCookie('session');
    }
    if(getCookie('u_uuid')) {
     delCookie('u_uuid');
    }
    next({
     path: '/'
    });
   }
  });
 } else {
  next();
 }
});
export default router;

이상 은 바로 Cookie 가 프로젝트 에서 사용 하 는 것 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주시 기 바 랍 니 다.