vue单页面应用简单实现登录逻辑

Posted 2020-11-25 kdiekdio

当用户在没有登录的状态下，只能够访问到系统的登录界面，不管输入的路由是什么，都会跳转到登录界面，当用户登录成功后，就会将登录的信息保存到 sessionStorage中，话不多说，直接上代码：

第一步是配置路由：第一个路由是不需要登录就能够进入的路由，第二个是需要登录才能进入的路由

{
      path: ‘/Login‘,
      name: ‘Login‘,
      component: Login
    }, {
      path: ‘/BackupWizard‘,
      name: ‘BackupWizard‘,
      component: BackupWizard,
      meta: {
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
      }
    }

第二步：在登录界面点击登录按钮时，当用户名和秘密都正确的时候，将登录状态存到sessionStorage，我这里是使用isLogin:true的方式存放到sessionStorage中，并且是在store中进行修改的：代码如下：login.vue文件：

this.$store.commit(‘login‘,values.userName);
this.$router.push({name:‘BackupDataView‘}); //登录成功后跳转到的页面

store文件：

//state中的token的初始值是false，表示未登录
login(state,n){
      state.token=true;
      state.username=n;
      sessionStorage.setItem(‘isLogin‘,true);
      sessionStorage.setItem(‘name‘,n);  //用于全局展示是谁登录系统
    },

第三步：在main.js文件中设置全局路由守卫，代码如下：

router.beforeEach((to,from,next)=>{
  //window.document.title=to.meta.title;
  if(to.meta.requireAuth == true){  //需要登录权限进入的路由
    if(store.state.token){  //取到登录信息
       next()
    }else if(sessionStorage.getItem(‘isLogin‘)){  //得到登录信息，进行下一步
      next();
    }else{
        next({name:‘Login‘});
    }
  }else{  //不需要登录权限
     next();
  }
})

完成这些配置，简单的登录逻辑就算是实现完成