vue路由守卫+登录态管理实例分析

本文实例讲述了vue路由守卫+登录态管理。分享给大家供大家参考，具体如下：

在路由文件需要守卫的path后面加上meta

{path: '/home',component: home,meta:{requireAuth:true}}

在main.js里面加上

//路由守卫
router.beforeEach((to, from, next) => {
 console.log(to);
 console.log(from);
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
  if(JSON.parse(localStorage.getItem('islogin'))){ //判断本地是否存在access_token
   next();
  }else {
   next({
    path:'/login'
   })
  }
 }
 else {
  next();
 }
 
 if(to.fullPath == "/login"){
  if(JSON.parse(localStorage.getItem('islogin'))){
   next({
    path:from.fullPath
   });
  }else {
   next();
  }
 }
});

其中islogin是登录态，就是true or false，true表示登录，false表示未登录，存放在localStorage里面，因为localStorage里面只能存字符串，所以存进去的时候需要localStorage.setItem(‘islogin',JSON.stringify(islogin));将islogin变为String类型，取出来的时候需要将islogin转化为Boolean类型，就比如JSON.parse(localStorage.getItem(‘islogin'))这样。

那么还有一个问题，就是islogin登录态的管理，vue不能实时监测localStorage的变化，需要实时监测islogin的变化来在页面显示登录还是已经登录，我用的是vuex+localStorage来管理islogin。展示部分代码

//store.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state:{
    //是否登录判断
    islogin:''
 },
 mutations:{
  login:(state,n) => {
    //传入登录状态islogin
    let islogin = JSON.parse(n);
    localStorage.setItem('islogin',JSON.stringify(islogin));
    console.log(islogin);
    state.islogin = islogin;
  }
 }
}

在需要改变登录态的页面只要触发上面这个login方法就可以了

//这里是登录
login() {
    let flag = true；
    this.$store.commit('login',flag);
    this.$router.push("/home");
    console.log("登录成功");
}
//这里是退出登录
exit() {
    let flag = false；
    this.$store.commit('login',flag);
    this.$router.push("/login");
    console.log("退出登录");
}

登录注册部分样式参考的element-ui

登录注册

    .el-button--primary {
      color: #fff;
      background-color: rgba(254, 112, 26, 0.8);
      border-color: rgba(254, 112, 26, 0.9);
    }
    .el-button:focus{
      color: #333;
      background-color: rgba(255, 255, 255, 0.1);
      border-color: #dcdfe6;
     }
     .el-button:hover{
 color: rgba(254, 112, 26, 1);
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(254, 112, 26, 0.9);
    }
    .el-button--primary:hover {
      color: #fff;
      background-color: rgba(254, 112, 26, 0.8);
      border-color: rgba(254, 112, 26, 0.9);
    }
    .el-button--primary:focus {
      color: #fff;
      background-color: rgba(254, 112, 26, 0.8);
      border-color: rgba(254, 112, 26, 0.9);
    }
    .register,
    .login{
 margin-top: 100px;
 margin-bottom: 100px;
 padding: 40px 0px 40px 0;
 background-color: #fff;
 width: 600px;
 margin: 100px auto;
 border-radius: 8px;
 box-shadow: 0px 0px 100px rgba(0,0,0,.1);
    }
    .register .register-title,
    .login .login-title{
 font-size: 1.65rem;
      line-height: 60px;
      font-weight: bold;
      white-space: nowrap;
      margin-bottom: 16px;
      color: #555;

    }
    .register-ruleForm,
    .login-ruleForm{
 width: 500px;
 margin: 0 auto;
 padding: 0px 100px 0px 0;
    }
    .login .toregister{
 cursor: pointer;
    }
    

希望本文所述对大家vue.js程序设计有所帮助。