来自一枚rookie的项目开发——vue3.0+typescript+element-plus+vue-router4+Pinia之动态路由（下）

路由守卫结合JWT token鉴权控制路由跳转

Pinia使用

import { defineStore } from 'pinia'
import { Entity } from '../global'
import { getMenuUrlSet } from '../utils/index'


export const useStore = defineStore('store', {
    state: () => {
        return {
            accountId: Number,
            token: JSON.parse(JSON.stringify(window.sessionStorage.getItem('token'))),
            menus: [] as Entity.RouterEntity[],
            apis: [],
            menuSet: [] as string[]
        }


    },

    getters: {
        getAccountId: (state) => state.accountId,
        getToken: (state) => state.token,
        getMenus: (state) => state.menus,
        getMenuSet: (state) => state.menuSet
    },

    actions: {
        setAccountId(key: number) {
           
        },
        setToken(key: string) {
            this.token = key
            window.sessionStorage.setItem('token', this.token);
        },
        setMeus(key: Entity.RouterEntity[]) {
            this.menus = JSON.parse(JSON.stringify(key))
            this.setMenuSet(getMenuUrlSet(this.menus,[] as string[]))
        },
        setMenuSet(key: string[]) {
            this.menuSet = key
        }

    },
    // state 数据持久化
    /* persist: {
        enabled: true
    } */
})

Typescript下路由守卫结合token实现前端权限管理

router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: any) => {
    const UserState = useStore();
    if (UserState.getToken) {
        if (JSON.parse(JSON.stringify(UserState.getMenus)).length) {
            if (new Set(UserState.menuSet).has(to.path)) {
                next()
            } else {
                next({ path: "/nav" })
            }
        } else {
            api.login().then(data => {
                UserState.setMeus(data?.data.menuData);
                UserState.setMenuSet(getMenuUrlSet(data?.data.menuData, [] as string[]))
                setTimeout(() => {
                    next({ ...to, replace: true });
                }, 100);
            }).catch(e => {
                window.sessionStorage.removeItem('token')
                next({ path: "/login" })
            });
        }
    } else {
        if (to.path == "/login") {
            next();
        }
        else {
            next({ path: "/login", replace: true })
        }
    }
})