vue 登录路由守卫

文章介绍了如何在VueRouter的index.js中使用beforeEach钩子实现登录拦截,通过sessionStorage检查用户是否已登录,未登录时跳转至登录页面。同时,展示了登录成功后如何在登录页面设置sessionStorage以保持用户状态。
摘要由CSDN通过智能技术生成

第一步在router文件内的index.js文件写入

// getItem 后面两个参数必须一样的 否则还提醒你登录
router.beforeEach((to, from, next) => {
  if (to.path == "/loginPage") {
    //如果用户要访问的是 /logonView 路由,则直接放行
    next();
  } else {
    //否则,检查用户是否已经登录(这里通过检查 sessionStorage 中是否有特定的数据来判断),如果已登录则放行,否则弹出一个提示框告知用户需要登录,并将路由切换到 /logonView
    if (sessionStorage.getItem("zhao") != null) { //存储登录
      next();
    } else {
      alert("请登录");
      next("/loginPage");
    }
  }
});

第二步在登录页面判断登录成功逻辑写如下

sessionStorage.setItem("zhao",  abc);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue Router 提供了一套强大的导航守卫(Guard)系统,这些守卫可以在路由变化之前或之后执行自定义操作,允许开发者拦截、验证、修改或重定向路由过程。路由守卫主要分为以下几种类型: 1. **全局守卫** (Global Guards): - **beforeEach**: 在每次导航尝试之前被调用,可以阻止导航、改变目标URL或者提供一些默认参数。 - ** afterEach**: 在每次导航完成后被调用,无论是否发生导航失败。 2. **路由级守卫** (Route Guards): - **beforeEnter**: 只在进入特定路由时触发,用于验证或处理进入该路由的权限或状态。 - **enter**: 类似于beforeEnter,但它是异步的,因此可以用它来做一些需要时间的操作,如数据请求。 - **afterEnter**: 在进入路由并完成渲染后执行。 - **beforeLeave**: 当离开当前路由时触发,可以用来确认离开操作。 - **leave**: 异步的离开守卫,类似`afterEnter`。 3. **导航失败守卫** (Navigation Failure Guards): - **catch**: 当导航失败(例如,未找到匹配的路由)时触发。 你可以使用这些守卫来实现各种功能,比如身份验证、数据加载、错误处理等。为了更好地利用它们,你需要在Vue实例的`router.options`中配置守卫,或者在每个具体的路由对象上设置。例如: ```javascript // 全局守卫示例 router.beforeEach((to, from, next) => { // 检查用户是否已登录 if (!isAuthenticated()) { next('/login'); } else { next(); } }); // 路由级守卫示例 const router = new VueRouter({ routes: [ { path: '/private', component: PrivateComponent, beforeEnter: authenticateUser } ] }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值