华山资源网

vue路由守卫+登录态管理实例分析
网络编程 2024/11/18 佚名
3 1

本文实例讲述了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();
 }
 /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
 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

登录注册

<template>
    <div class="logReg">
    <!-- 登录 -->
        <div class="login" v-show="flag">
            <div class="login-title">登录</div>
            <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="login-ruleForm">
             <el-form-item label="账号" prop="count2">
              <el-input type="string" v-model="ruleForm2.count2" placeholder="请输入您的账号"></el-input>
             </el-form-item>
             <el-form-item label="密码" prop="pass2">
              <el-input type="password" v-model="ruleForm2.pass2" autocomplete="off" placeholder="请输入您的密码"></el-input>
             </el-form-item>
             <el-form-item>
              <el-button type="primary" @click="submitForm2('ruleForm2')">提交</el-button>
              <el-button @click="resetForm2('ruleForm2')">重置</el-button>
             </el-form-item>
            </el-form>
            <div @click="register()" class="toregister" >没有账号？<span>立即注册</span></div>
        </div>
        <!-- 注册 -->
        <div class="register" v-show="!flag">
            <div class="register-title">注册</div>
            <el-form :model="ruleForm1" status-icon :rules="rules1" ref="ruleForm1" label-width="100px" class="register-ruleForm">
             <el-form-item label="账号" prop="count1">
              <el-input type="string" v-model="ruleForm1.count1" placeholder="请输入您的账号"></el-input>
             </el-form-item>
             <el-form-item label="密码" prop="pass1">
              <el-input type="password" v-model="ruleForm1.pass1" autocomplete="off" placeholder="请输入您的密码"></el-input>
             </el-form-item>
             <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm1.checkPass" autocomplete="off" placeholder="请确认您的密码"></el-input>
             </el-form-item>
             <el-form-item>
              <el-button type="primary" @click="submitForm1('ruleForm1')">提交</el-button>
              <el-button @click="resetForm1('ruleForm1')">重置</el-button>
             </el-form-item>
            </el-form>
            <div @click="register()" class="toregister" >已有账号？<span>立即登录</span></div>
        </div>
    </div>
</template>


<script>
    export default{
        name:'logReg',
        data() {
            //登录账号验证
       var validateCount2 = (rule, value, callback) => {
        if (value === '') {
         callback(new Error('请输入账号'));
        } else {
         if (value != "admin") {
             callback(new Error('账号不存在'));
         }
         //向后台请求验证账号是否存在
         callback();
        }
       };
       //登录密码验证
       var validatePass2 = (rule, value, callback) => {
        if (value === '') {
         callback(new Error('请输入密码'));
        } else {
        if (value != "admin") {
             callback(new Error('密码不正确'));
         }
         //向后台验证，也可以不处理
         callback();
        }
       };
       //注册账号验证
       var validateCount1 = (rule, value, callback) => {
        if (value === '') {
         callback(new Error('请输入账号'));
        } else {
         //向后台请求验证账号是否重复
         callback();
        }
       };
       //注册密码验证
       var validatePass1 = (rule, value, callback) => {
        if (value === '') {
         callback(new Error('请输入密码'));
        } else {
         if (this.ruleForm1.checkPass !== '') {
          this.$refs.ruleForm1.validateField('checkPass');
         }
         callback();
        }
       };
       //注册密码确认
       var validatePassCheck = (rule, value, callback) => {
        if (value === '') {
         callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm1.pass1) {
         callback(new Error('两次输入密码不一致!'));
        } else {
         callback();
        }
       };
       return {
           flag:true,//登录注册切换
           //登录账号密码
        ruleForm2: {
         pass2: '',
         count2:''
        },
        //登录验证
        rules2: {
         count2: [
          { validator: validateCount2, trigger: 'blur' }
         ],
         pass2:[
             { validator: validatePass2, trigger: 'blur' }
         ]
        },
        ruleForm1: {
         count1: '',
         pass1: '',
         checkPass: ''
        },
        rules1: {
         count1: [
          { validator: validateCount1, trigger: 'blur' }
         ],
         pass1:[
             { validator: validatePass1, trigger: 'blur' }
         ],
         checkPass: [
          { validator: validatePassCheck, trigger: 'blur' }
         ]
        },
       };
      },
      methods: {
          //登录提交
       submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
         if (valid) {
          console.log("提交成功");
          //提交成功之后操作
          let flag = true;
          this.$store.commit("login",flag);
          this.$router.push('/home');
          this.$message({
             message: '恭喜，登录成功',
             type: 'success'
            });
         } else {
          this.$message({
             message: '抱歉，登录失败',
             type: 'warning'
            });
          return false;
         }
        });
       },
       //登录框重置
       resetForm2(formName) {
        this.$refs[formName].resetFields();
       },
       //注册提交
       submitForm1(formName) {
        this.$refs[formName].validate((valid) => {
         if (valid) {
          this.$message({
             message: '恭喜，注册成功，请登录',
             type: 'success'
            });
          this.flag = !this.flag;
         } else {
          this.$message({
             message: '抱歉，注册失败',
             type: 'warning'
            });
          return false;
         }
        });
       },
       //注册框重置
       resetForm1(formName) {
        this.$refs[formName].resetFields();
       },
        //切换登录注册
          register() {
              this.flag = !this.flag;
          }
      },
     }
</script>


<style scoped>
    .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;
/*      color: rgba(254, 112, 26, 0.8);*/
    }
    .register-ruleForm,
    .login-ruleForm{
        width: 500px;
        margin: 0 auto;
        padding: 0px 100px 0px 0;
    }
    .login .toregister{
        cursor: pointer;
    }
    /*注册*/
</style>

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com