设置路由拦截

最新推荐文章于 2024-05-30 09:23:58 发布

原创最新推荐文章于 2024-05-30 09:23:58 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

该篇博客介绍了在前端路由中实现权限管理的策略。通过定义白名单并使用路由前置导航守卫，确保无token的用户在访问受保护页面时会被重定向到登录页面。在有token的情况下，则允许用户正常访问。这一机制增强了应用的安全性和用户体验。

// 二次拦截 当没有token的时候无法访问,避免没有发生请求的时候直接进入页面
// 路由前置导航守卫
// 白名单列表
// 每当路由值发生改变的时候设置路由导航.
const whiteList = ['/login', '/reg']
router.beforeEach((to, from, next) => {
  // to是去哪  from是从哪来  next是放行
  // 先判断是否访问的是有权限的页面
  if (whiteList.includes(to.path)) {
    // 用户访问的是登录或者注册页面 不需要拦截 直接放行
    next()
  } else {
    // 进入else分支说明用户访问的是有权限的页面, 先判断是否有token
    // 如果有token直接放行
    if (localStorage.getItem('token')) {
      next()
    } else {
      // 没有token拦截到登录页面让用户重新登录
      next({ path: '/login' })
    }
  }
})