路由守卫或者说路由拦截,在我们实际开发前端项目中是经常用到的操作;
通过路由守卫,可以在用户访问某个路由之前进行权限验证。(全局前置守卫)例如,可以检查用户是否登录,是否具有访问该路由的权限,如果不满足条件,则可以将用户重定向到其他页面或显示相应的提示信息。
可以使用 router.beforeEach
注册一个全局前置守卫
// 前置守卫
router.beforeEach((to, from) => {
}
)
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数:
to
: 即将要进入的目标
from
: 当前导航正要离开的路由
可以返回的值如下:
false
: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
路由对应的地址。router.push()
,且可以传入诸如 replace: true
或 name: 'home'
之类的选项。它会中断当前的导航,同时用相同的 from
创建一个新导航。// 前置守卫
// 全局拦截、除了登录页面,其他页面都必须授权(这里为pinia定义的token不为空)才能访问
router.beforeEach((to, from) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {
return { name: 'Login' }
}
else{
return true
}
}
)
在这个路由全局拦截方法中,我们规定如果只有login页面才能被所有人访问,访问的页面不是login页面都要有身份认证(pinia定义的token)才行,如果没有、则会自动跳到login登录页面,这在我们前端开发中是经常用到的。
如果遇到了意料之外的情况,可能会抛出一个 Error
。这会取消导航并且调用 router.onError() 注册过的回调。
如果什么都没有,undefined
或返回 true
,则导航是有效的,并调用下一个导航守卫
next
在之前的 Vue Router 版本中(vue-router3),还可以使用 第三个参数 next
。在最新版的vue-router4版本中,官方移除了next参数,推荐我们只使用to、from这两个参数。然而,它仍然是被支持的,这意味着你可以向任何导航守卫传递第三个参数。
在这种情况下,确保 next
在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次,但是只能在所有的逻辑路径都不重叠的情况下,否则钩子永远都不会被解析或报错。
错误的next使用方法:(这时,如果用户没有携带token,那么next会被调用两次)
// 前置守卫
// 全局拦截、除了登录页面,其他页面都必须授权(这里为pinia定义的token不为空)才能访问
router.beforeEach((to, from, next) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {
next({name: 'login'})
}
next()
}
)
正确的用法:(务必确保next只被调用一次)
// 前置守卫
// 全局拦截、除了登录页面,其他页面都必须授权(这里为pinia定义的token不为空)才能访问
router.beforeEach((to, from, next) => {
const useToken=useTokenStore()
if (to.name !== 'login' && !useToken.token) {
next({name: 'login'})
}
else{
next()
}
}
)
可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会改变导航本身
// 后置守卫
router.afterEach((to, from) => {
console.log('路由跳转的路径====>',to.path)
}
)
一般来说,我们经常使用前置钩子,因为它能够在我们跳转路由之前进行拦截。后置钩子我们一般用于分析、记录日志、声明页面等辅助功能以及许多其他事情都很有用。
可以用 router.beforeResolve
注册一个全局守卫。它在每次导航时都会触发,不同的是,解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。这意味着在路由对象被创建之后,但还没有被解析或渲染时,全局解析守卫将会被触发。
router.beforeResolve( to => {
if (to.meta.requiresCamera) {
try {
} catch (error) {
if (error instanceof NotAllowedError) {
// 处理错误,然后取消导航
return false
} else {
// 意料之外的错误,取消导航并把错误传给全局处理器
throw error
}
}
}
})
router.beforeResolve
是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。
组件内的守卫分为三种:
beforeRouteEnter:
在渲染该组件的对应路由被验证前调用 ,当守卫执行时,组件实例还没被创建!
注意:在 vue3 中的 setup 函数中是不可以使用 beforeRouterEnter 这个路由守卫的
方法一、我们可以在设置路由的时候,使用beforeEnter方法拦截,即在router.js中:
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// 可以在定义路由的时候监听from和to
return false
},
}
方法二、使用选项式api,就可以使用beforeRouterEnter这个钩子了
beforeRouteUpdate:
在当前路由改变,但是该组件被复用时调用
举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候
onBeforeRouteUpdate((to,from)=>{
console.log(from.path,'更新为了',to.path);
}
beforeRouteLeave:
在导航离开渲染该组件的对应路由时调用
// 在导航离开渲染该组件的对应路由时调用
onBeforeRouteLeave((to,from)=>{
console.log(from.path,'离开了');
})