在做后台管理系统的时候,为了防止用户通过地址路由访问而跳过了登录页面,所以要进行token的检查
此时我们就需要路由导航守卫

// 挂在路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // 访问登录页面 直接放行
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有token, 强制转到login页面
  if (!tokenStr) return next('/login')
  next()
})

如果检测到当前页面没有token,则强制跳转到 login页面
在发送登录请求的时候,如果登录成功,则要把token保存下来

// 将登陆成功之后的token,保存到客户端的 sessionStorage 中
 // token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage
window.sessionStorage.setItem('token', res.data.token)
 // 通过编程式导航跳转到后台主页,路由地址是 /home
this.$router.push('/home')

在登陆成功后,我们可以看到token是被保存下来了的

在这里插入图片描述
如果删除token,则页面就会强制跳转到登录界面

Logo

前往低代码交流专区

更多推荐