Vue检测token实现路由导航守卫(验证token,强制跳转)
在做后台管理系统的时候,为了防止用户通过地址路由访问而跳过了登录页面,所以要进行token的检查此时我们就需要路由导航守卫// 挂在路由导航守卫router.beforeEach((to, from, next) => {// to 将要访问的路径// from 代表从哪个路径跳转而来// 访问登录页面 直接放行if (to.path === '/login') return next()c
·
在做后台管理系统的时候,为了防止用户通过地址路由访问而跳过了登录页面,所以要进行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,则页面就会强制跳转到登录界面
更多推荐
已为社区贡献7条内容
所有评论(0)