路由拦截器分析

xzz2021
发布于 2024-11-22 / 4 阅读
0
0

路由拦截器分析

文件permission.ts

router.beforeEach(async (to, from, next) => {
// 用户权限路由  app  用户信息store
  const permissionStore = usePermissionStoreWithOut()
  const appStore = useAppStoreWithOut()
  const userStore = useUserStoreWithOut()
// 用户信息是否存在
  if (userStore.getUserInfo) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      // 是否已 动态添加路由表
      if (permissionStore.getIsAddRouters) {
        next()
        return
      }
// 上面的逻辑是  如果用户登陆过且分配过路由  则直接进入相应路由

     //  如果有用户信息 还存在未分配路由???????

      const roleRouters = userStore.getRoleRouters || []
      await permissionStore.generateRoutes('server', roleRouters as AppCustomRouteRecordRaw[])
      // 动态添加可访问路由表
      permissionStore.getAddRouters.forEach((route) => {
        router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
      })
//  下面的逻辑和登陆组件getRole逻辑一样
      const redirectPath = from.query.redirect || to.path
      const redirect = decodeURIComponent(redirectPath as string)
      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
      permissionStore.setIsAddRouters(true)
      next(nextData)
    }
  } else {
// 如果用户未登陆  重定向到白名单页面
    if (NO_REDIRECT_WHITE_LIST.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
    }
  }
})
//  路由跳转结束
router.afterEach((to) => {
  useTitle(to?.meta?.title as string)
  done() // 结束Progress
  loadDone()
})

评论