vuex+jwt实现登录校验

最新推荐文章于 2023-08-23 14:30:33 发布

米忽悠精神股东

最新推荐文章于 2023-08-23 14:30:33 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： vuex jwt 登录校验

本文链接：https://blog.youkuaiyun.com/qq_37720936/article/details/88848426

学习笔记专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用Vue结合Vuex进行用户认证与权限控制。主要内容包括配置Vuex存储用户信息及Token，实现页面导航守卫来判断用户登录状态，并通过设置路由元信息实现不同权限级别的路由访问控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前根据别人的博客做的，结果忘记收藏现在找不到是哪篇了，自己写一篇防止以后忘记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 // 添加该字段，表示进入这个路由是需要登录的
    }
}