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