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


Posted in Javascript onMay 21, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue实现跨域的方法分析
May 21 #Javascript
vue动态绑定class的几种常用方式小结
May 21 #Javascript
express启用https使用小记
May 21 #Javascript
使用express获取微信小程序二维码小记
May 21 #Javascript
小程序server请求微信服务器超时的解决方法
May 21 #Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 #Javascript
用node.js写一个jenkins发版脚本
May 21 #Javascript
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP学习之PHP表达式
2006/10/09 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php引用传值实例详解学习
2013/11/06 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
javascript打印输出json实例
2013/11/11 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Vue实现active点击切换方法
2018/03/16 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Python yield 小结和实例
2014/04/25 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python实现桌面气泡提示功能
2019/07/29 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
自我推荐书
2013/12/04 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
英语课外活动总结
2014/08/27 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang