前端如何设置权限（不建议前端设置权限）

最新推荐文章于 2024-07-23 23:18:19 发布

前端--辉哥

最新推荐文章于 2024-07-23 23:18:19 发布

阅读量287

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/xvGUANGhui/article/details/125008899

版权

先声明每个角色都要有一个代表这个角色的标识（在登录时由后端返回）话不多说直接上代码

router.beforeEach(async (to, from, next) => {
    if (!sessionStorage.getItem('userinfo')) {
        localStorage.clear("token");
    }
    NProgress.start()
    const hasToken = getToken()
    if (hasToken) {
        if (to.path === '/login') {
            next()
            NProgress.done()
        } else {
            const hasGetUserInfo = store.getters
            if (hasGetUserInfo) {
                if (JSON.parse(sessionStorage.getItem("userinfo")).role === 0) {
                    router.options.routes[5].children[2].hidden = true;
                    router.options.routes[7].hidden = true;
                    next()
                }
                if (JSON.parse(sessionStorage.getItem("userinfo")).role != 2) {
                    router.options.routes[6].children[3].hidden = true;
                    next()
                }
                next()
            } else {
                try {
                    await store.dispatch('user')
                    next()
                } catch (error) {
                    await store.dispatch('user/resetToken')
                    Message.error(error || 'Has Error')
                    next(`/login?redirect=${to.path}`)
                    NProgress.done()
                }
            }
        }
    } else {
        if (whiteList.indexOf(to.path) !== -1) {
            next()
        } else {
            next(`/login?redirect=${to.path}`)
            NProgress.done()
        }
    }
})