vue 全局路由守卫
在开发管理端项目,常常需要根据当前登录者获取对应的权限和对应的菜单,展示不同的页面。而如果不做全局路由守卫的话,手动改变url为项目中真实存在的路由地址时,页面会正常跳转,但是其实不应该让用户看到该页面。
代码逻辑如下:
所有用户都可以访问白名单中的路由和自己能看到的menuList中的菜单
但是如果用户在url中直接修改,应该根据权限判断是否能看到
没有权限则跳转到noPerm页面,此处需要注意如果浏览器的URL改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址
next(false): 中断当前的导航(参见vue router全局前置守卫文档)
1 export default ({ app }) => { 2 app.router.beforeEach((to, from, next) => { 3 const menuList = sessionStorage.getItem('mainMenu'); 4 const whiteList = ['/login', '/noPerm', '/']; 5 if (whiteList.includes(to.path)) { 6 // 用户手动或者浏览器后退按钮改变url 7 if (from.path === '/') { 8 // 中断当前的导航 否则跳转到/路径下,展示页面不存在 9 next(false); 10 } 11 next(); 12 } else if (menuList) { 13 const menuPathList = JSON.parse(menuList).map((item) => item.path) || []; 14 if (menuPathList.includes(to.path)) { 15 next(); 16 } else { 17 next({ path: '/noPerm', replace: true }); 18 } 19 } else { 20 next({ path: '/login' }); 21 } 22 }); 23 };