Vue——路由：登录状态的判断

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在搭建的系统中，最基本的登录都是必须的，结合Vue的路由，涉及最多的就是登录状态的判断。也就是说，如果一个组件要校验登录状态，则在用户初始进入时，就要去判断用户是否登录，这里的校验登录状态就是本篇的重点。

直接上实例，需要的拿走

一、router / index.js 路由中加校验

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/componentA',
      name: 'componentA',
      component: componentA,
      meta:{
        requireLogin:true // 当前路由需要校验，不需要就不用写
      }
    },
    {
      path: '/componentB',
      name: 'componentB',
      component: componentB,
      meta:{
        requireLogin:true 
      }
    },{
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{
        requireLogin:true
      }
    },{
      path: '/orderManager',
      name: 'orderManager',
      component: orderManager,
      meta:{
        requireLogin:true
      }
    }
  ]
})

二、main.js 判断该路由是否需要登录权限

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireLogin)){  // 判断该路由是否需要登录权限
    if (sessionStorage.getItem('loginInfo')) {  // 判断当前用户的登录信息loginInfo是否存在
      next();
    } else {
      next({
        path: '/'
      })
    }
  }else {
    next();
  }
})

三、login.vue 登录组件内，登陆成功后的处理

this.$http({
   method: 'POST',
   url: this.userLoginUrl,
   data: param
}).then((res) => {
   sessionStorage.setItem('loginInfo',JSON.stringify(res.data.result));
   this.$router.push('/HelloWorld');  // 登陆成功后默认跳转的路由
})

四、实现效果

1、在地址栏键入 http://localhost:8080 ，因为路由的原因，直接跳去登录模块，地址栏：http://localhost:8080/#/  

2、在地址栏继续键入componentA ，即 http://localhost:8080/#/componentA 回车，因为 componentA 是需要校验的模块，现在未登录，所以路由 path: '/' ，页面还是跳去了登录页面。

        

 3、填写数据登录

点击登录，页面按照 login.vue 中的默认跳转路由，跳去 HelloWorld 模块：

以上是 Vue——路由：登录状态的判断 的全部内容， 来源链接： utcz.com/z/380489.html

回到顶部