vue3中路由守卫的快速上手

2024-01-09 23:32:33

路由守卫或者说路由拦截，在我们实际开发前端项目中是经常用到的操作；

通过路由守卫，可以在用户访问某个路由之前进行权限验证。（全局前置守卫）例如，可以检查用户是否登录，是否具有访问该路由的权限，如果不满足条件，则可以将用户重定向到其他页面或显示相应的提示信息。

全局前置守卫（在每次路由跳转之前被触发）

可以使用?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这个钩子了

<script>
export default {
	beforeRouteEnter(to, from) {
		console.log('before router enter', to, from)
	}
}
</script>

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,'离开了');

})