StarBlog文字与索引
返回文章列表文章索引阅读全文
STARBLOG / 阅读手记
StarBlog前端开发-Vue

StarBlog博客开发笔记：前端开发之导航守卫

路由对象router给我们提供了beforeEach方法，可以在每次路由之前进行一些相关处理，也叫导航守卫，我们这里就通过导航守卫实现一些类似身份认证的辅助功能。 修改router/index.js文件，添加导航守卫，在每次路由时判断用户会话是否过期。如果登录有效且跳转的是登录界面，就直接路由到主页；如果是非登录页面且会话过期，就跳到登录页面要求登录。 代码如下 router.beforeEach

曦远 (DealiAxy)约 2 分钟

路由对象router给我们提供了beforeEach方法，可以在每次路由之前进行一些相关处理，也叫导航守卫，我们这里就通过导航守卫实现一些类似身份认证的辅助功能。

修改router/index.js文件，添加导航守卫，在每次路由时判断用户会话是否过期。如果登录有效且跳转的是登录界面，就直接路由到主页；如果是非登录页面且会话过期，就跳到登录页面要求登录。

代码如下

router.beforeEach((to, from, next) => {
  // 登录界面登录成功之后，会把用户信息保存在会话
  // 存在时间为会话生命周期，页面关闭即失效。
  let userName = sessionStorage.getItem('user')
  if (to.path === '/login') {
    // 如果是访问登录界面，如果用户会话信息存在，代表已登录过，跳转到主页
    if (userName) next({path: '/'})
    else next()
  } else {
    if (!userName) {
      // 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
      next({path: '/login'})
    }
  }
})

_EOF_

StarBlog博客开发笔记：前端开发之导航守卫

本文作者：
程序设计实验室
版权声明：
本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

相关文章

StarBlog博客开发笔记：前端开发(8)之vuex与状态管理

状态管理 在很多应用场景下，我们需要在组件之间共享状态，比如我们的左侧导航栏需要收缩和展开的功能，收缩状态时宽度很小，只显示菜单图标，因为导航菜单栏收缩之后宽度变了，所以右侧的主内容区域要占用导航栏收缩的空间，主内容区域宽度也要根据导航栏的收缩状态做变更，而导航栏和主内容区域是两个不同的组件，而非父子组件之间不支持状态传递，所以组件之间的状态共享问题发生了。 之前我写flutter的时候，响应式设

2023-07-14 · StarBlog前端开发-Vue · 约 1 分钟

讨论

共 0 条

良言一句三冬暖，恶语伤人六月寒。

加载评论中…