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 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
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
PHP伪造referer实例代码
2008/09/20 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
深入php多态的实现详解
2013/06/09 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
客服专员岗位职责范本
2013/11/29 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
关于环保的演讲稿
2014/05/10 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
保密工作承诺书
2014/08/29 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
部队个人年终总结
2015/03/02 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
LeetCode189轮转数组python示例
2022/08/05 Python