router前置路由守卫 用户登录时跳入指定路由,未登录时跳转到登录页,携带参数,清空用户信息

181 阅读1分钟
// 白名单,这里以name进行判断,要求无需登录的路由需要配置name属性在路由配置中
const whitespace = ['login']

// ## 全局前置守卫
router.beforeEach((to, from, next) => {
  // 登录权限,判断是否包含token,组件未获取token时,可跳转到白名单对应路由下
  if (localStorage.getItem('Authorization') || whitespace.includes(to.name)) {
       next()
    // 可携带参数 next({ params: currentParams })
  } else {
    // 无token时,清除用户信息,并跳转到置顶路由页,并重定向到即将跳转的页面
    localStorage.removeItem('userInfo')
    next(
      {
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      }
    )
  }
})