详解vue项目中使用token的身份验证的简单实践

//router.js
{
 path: "/index",
 name: "index",
 component: resolve => require(['./index.vue'], resolve),
 meta: { 
  requiresAuth: true 
 }
} 

router.beforeEach((to, from, next) => {
 //matched的数组中包含$route对象的检查元字段
 //arr.some() 表示判断该数组是否有元素符合相应的条件, 返回布尔值
 if (to.matched.some(record => record.meta.requiresAuth)) {
  //判断当前是否有登录的权限
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})

// http request 拦截器
axios.interceptors.request.use(
 config => {
  if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
   config.headers.Authorization = `token ${store.state.token}`;
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 });

// http response 拦截器
axios.interceptors.response.use(
 response => {
  return response;
 },
 error => {
  if (error.response) {
   switch (error.response.status) {
    case 401:
     // 返回 401 清除token信息并跳转到登录页面
     store.commit(types.LOGOUT);
     router.replace({
      path: 'login',
      query: {redirect: router.currentRoute.fullPath}
     })
   }
  }
  return Promise.reject(error.response.data) // 返回接口返回的错误信息
});

 //login.vue
 methods: {
  login(){
   if (this.token) {
    //存储在本地的localStograge中
    this.$store.commit(types.LOGIN, this.token)
    //跳转至其他页面
    let redirect = decodeURIComponent(this.$route.query.redirect || '/');
    this.$router.push({
     path: redirect
    })
   }
  }
 }

import Vuex from 'vuex';
import Vue from 'vue';
import * as types from './types'

Vue.use(Vuex);
export default new Vuex.Store({
 state: {
  user: {},
  token: null,
  title: ''
 },
 mutations: {
  //登录成功将, token保存在localStorage中
  [types.LOGIN]: (state, data) => {
   localStorage.token = data;
   state.token = data;
  },
  //退出登录将, token清空
  [types.LOGOUT]: (state) => {
   localStorage.removeItem('token');
   state.token = null
  }
 }
});

export const LOGIN = 'login';
export const LOGOUT = 'logout';