RBAC导航守卫

在写之前首先了解什么是导航守卫：

　　Vue导航守卫是Vue Router提供的一种机制，用于在导航过程中对路由进行控制和管理。通过导航守卫，可以在路由跳转前、跳转后以及导航被确认时执行一些逻辑，比如进行权限验证、页面数据加载、页面跳转动画等操作。

　　　知道导航守卫之后就可以开始写代码了，代码如下：

　　　　代码写在 router 下的 index.js下（代码后有详细讲解代码）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

router.beforeEach((to, from, next) => {   // canUserAccess() 返回 `true` 或 `false`   // const canAccess = await canUserAccess(to)   // if (!canAccess) return '/login'   if (to.meta) {     if (to.meta.UserAsses) {       var userStr = window.localStorage.getItem(config.userToken);       if (!userStr) {         next({ path: '/UserLogin' })       } else {         next();       }     } else {       next();     }   } else {     next();   } })<br>

　

 

这段代码是一个Vue Router的全局前置守卫（beforeEach）的实现。让我来解释一下这段代码的功能：

1. 首先，代码使用了router.beforeEach来注册一个全局前置守卫，该守卫会在每次路由跳转前执行。

2. 在守卫函数内部，通过to参数获取将要跳转的目标路由对象，通过from参数获取当前的路由对象，以及通过next函数来控制路由的跳转。

3. 守卫函数中首先检查目标路由对象（to）是否包含meta字段，如果包含，则继续执行下一步判断。

4. 如果目标路由对象的meta字段中包含UserAsses属性，它会读取本地存储中的用户信息（假设存储在config.userToken中），如果用户信息不存在（未登录），则通过next({ path: '/UserLogin' })将路由重定向到/UserLogin页面，表示需要用户登录后才能访问该页面。

5. 如果目标路由对象的meta字段不包含UserAsses属性，则直接执行next()，表示无需进行用户登录验证，可以直接跳转到目标页面。

6. 如果目标路由对象不包含meta字段，则同样执行next()，表示无需进行任何验证，可以直接跳转到目标页面。

总的来说，这段代码的作用是在每次路由跳转前，检查目标路由的meta字段是否包含UserAsses属性，如果包含则判断用户是否已登录，如果未登录则将用户重定向到登录页面；如果不包含UserAsses属性或者meta字段不存在，则直接进行路由跳转。这种方式可以实现对需要登录权限的页面进行统一的权限验证。

 

　到此这个是导航守卫的代码