Vue路由守卫，防止直接输入url越权访问

最新推荐文章于 2024-10-08 17:48:41 发布

陳那个陈

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量208

点赞数 1

文章标签：前端 vue.js javascript 前端框架

本文链接：https://blog.csdn.net/weixin_52164116/article/details/139475918

版权

为了防止用户直接输入网址越权访问登录后的网页，需要进行拦截禁止访问页面，登录成功后端接口返回该用户可以访问的所有菜单路由，前端数据存储到Vuex中，在路由守卫进行判断拦截

router.beforeEach((to, from, next) => {
  //根据自己的需要进行判断
  if (store.state.userMenus.length > 0 && storage.get('token')) {

            //获取用户可访问菜单集合
            let menuArray = store.state.userMenus
            let urlArr = []; //菜单路由集合

            menuArray.forEach(item => {
                if (item.children != null && item.children.length > 0) {
                    item.children.forEach(obj => {
                        if (obj.children != null && obj.children.length > 0) {
                            obj.children.forEach(data => {
                                if (data.children != null && data.children.length > 0) {

                                } else {
                                    urlArr.push(data.url);
                                }
                            })
                        } else {
                            urlArr.push(obj.url);
                        }
                    })
                } else {
                    urlArr.push(item.url);
                }
            })

            //没有添加到接口的路由，路由白名单
            let whiteUrlList = ['/noPermission', '/404', '/userInfo', '/login'];

            //判断当前路由是否有权限访问,没有就跳转到无权限页面
            //includes方法返回一个布尔值，表示某个数组是否包含给定的值
            if (!whiteUrlList.includes(to.path) && !urlArr.includes(to.path)) {
                return  next('/noPermission');
            }


})