在写之前首先了解什么是导航守卫：
Vue导航守卫是Vue Router提供的一种机制，用于在导航过程中对路由进行控制和管理。通过导航守卫，可以在路由跳转前、跳转后以及导航被确认时执行一些逻辑，比如进行权限验证、页面数据加载、页面跳转动画等操作。
知道导航守卫之后就可以开始写代码了，代码如下：
代码写在 router 下的 index.js下（代码后有详细讲解代码）
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();
}
})
这段代码是一个Vue Router的全局前置守卫（beforeEach）的实现。让我来解释一下这段代码的功能：
-
首先，代码使用了
router.beforeEach来注册一个全局前置守卫，该守卫会在每次路由跳转前执行。 -
在守卫函数内部，通过
to参数获取将要跳转的目标路由对象，通过from参数获取当前的路由对象，以及通过next函数来控制路由的跳转。 -
守卫函数中首先检查目标路由对象（
to）是否包含meta字段，如果包含，则继续执行下一步判断。 -
如果目标路由对象的
meta字段中包含UserAsses属性，它会读取本地存储中的用户信息（假设存储在config.userToken中），如果用户信息不存在（未登录），则通过next({ path: '/UserLogin' })将路由重定向到/UserLogin页面，表示需要用户登录后才能访问该页面。 -
如果目标路由对象的
meta字段不包含UserAsses属性，则直接执行next()，表示无需进行用户登录验证，可以直接跳转到目标页面。 -
如果目标路由对象不包含
meta字段，则同样执行next()，表示无需进行任何验证，可以直接跳转到目标页面。
总的来说，这段代码的作用是在每次路由跳转前，检查目标路由的meta字段是否包含UserAsses属性，如果包含则判断用户是否已登录，如果未登录则将用户重定向到登录页面；如果不包含UserAsses属性或者meta字段不存在，则直接进行路由跳转。这种方式可以实现对需要登录权限的页面进行统一的权限验证。
到此这个是导航守卫的代码