vue-router + axios token登录状态认证

vue项目中登录状态判断往往基于jwt认证，我们可以采用判断本地是否存在token，及token是否过期或token值错误

1.利用vue-router 钩子函数判断本地是否存在token

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '@/page/home'
import store from '@/page/store'
import login from '@/page/login'
Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: home,
      meta: { requireAuth: true },
    },
     {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/store',
      name: 'store',
      component: store,
      meta: { requireAuth: true },
    }
  ]
})

//判断是否登录
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) {
    if (localStorage.getItem('token')) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
});

2.axios  存在token，但token已过期或token错误，基于axios请求后台进行判断

import axios from 'axios';
import router from '@/router';
import { Loading, Message, MessageBox } from 'element-ui';
// 超时时间
axios.defaults.timeout = 5000;
let loadinginstace;
// 拦截请求
axios.interceptors.request.use(function(config) {
  let token = localStorage.getItem("token");
  if (token) {
    config.headers["x-access-token"] = token;
  }
  loadinginstace = Loading.service({ fullscreen: true });
  return config;
}, function(error) {
  loadinginstace.close();
  Message.error('加载超时');
  return Promise.reject(error);
})

// 拦截相应

axios.interceptors.response.use(function(config) {
  if (config.data.msg == 'token信息错误或失效！') {
    MessageBox.confirm('token信息错误或失效，请重新登录！', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }).then(() => {
      router.replace({
        path: 'login',
        query: { redirect: router.currentRoute.fullPath }
      })
    }).catch(() => {

    });

  };
  loadinginstace.close();
  return config;
}, function(error) {
  loadinginstace.close();
  Message.error('加载超时');
  return Promise.reject(error);
});

以上2个步骤就可以实现项目的完整基于token登录状态信息的判断。

完整项目demo贴上 github ： https://github.com/zhuzeliang/node-vue-demo