vuex+jwt实现登录校验

之前根据别人的博客做的，结果忘记收藏现在找不到是哪篇了，自己写一篇防止以后忘记ww

 

下面是实现流程：

 

 

首先在src下创建这么个文件用来配置vuex，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    // 初始化的数据
    state: {
        userName: null,
        token: null
    },
    // 改变state里面的值得方法
    mutations: {
        saveToken(state, data) {
            state.token = data;
            window.localStorage.setItem("Token", data);
        }
    }
});
// 输出模块
export default store;

 

然后在路由配置里import刚才的这个文件：

import Store from '@/vuex/store'

 

在路由配置的后面加上如下拦截：

const router = new VueRouter({
  mode: 'xxxx',
  routes: [
]
})
...
...

// 这里是路由配置，下面的代码利用vuex实现鉴权，代码就添加在路由配置的这个位置。

var storeTemp = Store;
router.beforeEach((to, from, next) => {
    if (!storeTemp.state.token) {
        storeTemp.commit("saveToken",window.localStorage.Token)
    }
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (window.localStorage.Token&&window.localStorage.Token.length>=128) {  // 通过vuex state获取当前的token是否存在
            next();
        }
        else {
            next({
                path: '/Login',
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else if(to.meta.pRequireAuth){  // 判断该路由是否登录禁用
        if (!window.localStorage.Token||window.localStorage.Token.length<=128) {  // 通过vuex state获取当前的token是否存在
            next();
        }
        else{
            next({
                path: '/Info',
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
            });
        }
    }
    else{
        next();
    }
})

之后在路由配置里加上这个meta就可以了，pRequireAuth代表登录禁止，不加meta的路由是登录与否都可以访问的

{
    path: '/Info',
    name: 'Info',
    component: Info,
    meta: {
        requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
    }
}