vue --- 导航守卫

最新推荐文章于 2024-12-03 07:15:00 发布

吸猫患者

最新推荐文章于 2024-12-03 07:15:00 发布

阅读量136

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：导航守卫 vue

本文链接：https://blog.youkuaiyun.com/weixin_44781484/article/details/89213495

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何在前端应用中实现路由鉴权，确保未登录用户无法访问非公开页面。通过使用Vue.js的beforeEach钩子，我们演示了如何判断用户是否已登录，并根据本地存储的token决定用户是否可以继续访问请求的页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求: 如果你没有登录过, 不允许你访问其他页面

解析:

router.beforeEach( ( to,from,next ) => {

to : 要跳转的目标对象

form: 从哪里跳转过来的

next: 函数

next() : 放你走
next( false ) : 不放你走
next( ’ / ’ ) ==> 跳转指定要跳转的路径

} )

解决办法:

判断访问的是不是登录页
是的话,就 next()

如果不是登录页
就判断token有没有值
先获取本地的token
再三元判断 ==> token ?
true ==> next()
false ==> next(’ /login ')

模拟逻辑:
 * 1. 先判断要跳转的页面是不是登录页,如果是,直接让他跳转
 * 2. 如果不是登录页,就需要先获取 本地的token, 用三元判断 token有没有值, 有值的话,就让他跳转, 如果没有就跳转到 登录页
 
 router.beforeEach((to, from, next) => {
  // to: 要跳转的目标对象
  // from: 从哪里跳转过来
  // next 函数 ==> next() 让你跳转 /  next('/') 跳转指定页面 / next(false) ==> 不给跳转
  if (to.path === '/login') {
    next()
  } else {
    let token = localStorage.getItem('token')
    token ? next() : next('/login')
  }
})