VUE----限制无权限路径访问

需求后台系统
从后台获取允许访问的菜单列表，并在右侧菜单栏展示，但路由已在router.js中配置完成，此时无权限的路径不展示在前端页面，但用户仍可输入url进行访问。则需要解决该问题。
解决办法：
1.从后台获取的允许访问的菜单列表储存在vuex或localStorage中
2.在router.js中对需要进行需要校验权限的页面配置*meta: { requiresAuth: true }*属性
3.接下来在全局路由守卫里做判断，可在main.js中编写钩子函数对路由进行判断，与后台允许访问列表的菜单匹配的路径才可进入。
如下代码
从后台获取的菜单列表储存在vuex或localStorage中。

menuList ={‘/index’，‘/Statistical’};
localStorage.setItem("menuList",JSON.stringify(menuList));

router.js中：

{
        path: '/Statistical',
        component: () => import('../components/page/Statistical.vue'),
        meta: { title: '统计',requiresAuth: true }
}

main.js中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('token');
    if (!role && to.path !== '/login') {     //判断是否有权限进入该后台系统
        next('/login');              
    }
    //重点在这里
    else if (to.matched.some(res => res.meta.requiresAuth)){
        // 根据路由中添加的meta.requiresAuth属性
        // 判断用户访问的to.path，与后台菜单中的path是否一致
        let menuList = JSON.parse(localStorage.getItem('menuList'));
            if (menuList && menuList.length != 0) {
                if(menuList.indexOf(to.path) > -1){// 若存在，继续访问
                    next();
                } else {
                    next('/login');   //如不存在，则跳转至登录页面
                }
            } else {
                next();
            }
        }
    else {
        // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
        if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
            Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
                confirmButtonText: '确定'
            });
        } else {
            next();
        }
    }
});
  new Vue({
    router,
    render: h => h(App)
  }).$mount('#app');

来源：CSDN

作者：VIVI Xiao

链接：https://blog.csdn.net/xyy1234567891/article/details/104571047

标签

vue

localstorage