Vue中的验证登录状态的实现方法


Posted in Javascript onMarch 09, 2019

Vue项目中实现用户登录及token验证

先说一下我的实现步骤:

  1. 使用easy-mock新建登录接口,模拟用户数据
  2. 使用axios请求登录接口,匹配账号和密码
  3. 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页
  4. 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面。
  5. 注销后,就清除sessionStorage里的token信息并跳转到登录页面

使用easy-mock模拟用户数据

我用的是easy-mock,新建了一个接口,用于模拟用户数据:

{
 "error_code": 0,
 "data": [{
   "id": '1',
   "usertitle": "管理员",
   "username": "admin",
   "password": "123456",
   "token": "@date(T)",
  },
  {
   "id": '2',
   "usertitle": "超级管理员",
   "username": "root",
   "password": "root",
   "token": "@date(T)",
  }
 ]
}

login.vue中写好登陆框:

<template>
<div>
  <p>用户名:<input type='text' v-model="userName"></p>
  <p>密码:<input type='text' v-model="passWord"></p>
  <button @click="login()">登录</button>
</div>
</template>
<script>
 export default {
  data() {
    return {
     userName:'root',
     passWord:'root'
    }
  }
}
</script>

然后下载axios:npm install axios --save,用来请求刚刚定义好的easy-mock接口:

login(){
    const self = this;
    axios.get('https://easy-mock.com/mock/5c7cd0f89d0184e94358d/museum/login').then(response=>{
     var res =response.data.data,
       len = res.length,
       userNameArr= [],
       passWordArr= [],
       ses= window.sessionStorage; 
     // 拿到所有的username
     for(var i=0; i<len; i++){
      userNameArr.push(res[i].username);
      passWordArr.push(res[i].password);
     }
     console.log(userNameArr, passWordArr);
     if(userNameArr.indexOf(this.userName) === -1){
       alert('账号不存在!');
     }else{
      var index = userNameArr.indexOf(this.userName);
      if(passWordArr[index] === this.passWord){
       // 把token放在sessionStorage中
       ses.setItem('data', res[index].token);
       this.$parent.$data.userTitle = res[index].usertitle;
       //验证成功进入首页
       this.startHacking ('登录成功!');
       //跳转到首页
       this.$router.push('/index');
       // console.log(this.$router);
      }else{
       alert('密码错误!')
      }
     }
    }).catch(err=>{
     console.log('连接数据库失败!')
    })
   }

这一步最重要的是当账号密码正确时,把请求回来的token放在sessionStorage中,

配置路由

然后配置路由新加一个meta属性:

{
   path: '/',
   name: 'login',
   component: login,
   meta:{
    needLogin: false
   }
  },
  {
   path: '/index',
   name: 'index',
   component: index,
   meta:{
    needLogin: true
   }
  }

判断每次路由跳转的链接是否需要登录,

导航卫士

在main.js中配置一个全局前置钩子函数:router.beforeEach(),他的作用就是在每次路由切换的时候调用
这个钩子方法会接收三个参数:to、from、next。

  • to:Route:即将要进入的目标的路由对象,
  • from:Route:当前导航正要离开的路由,
  • next:Function:个人理解这个方法就是函数结束后执行什么,先看官方解释
    • 1.next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的),
    • 2.next(false):中断当前的导航。如果浏览器的url改变了(可能是用户手动或浏览器后退按钮),那么url地址会重置到from路由对应的地址。
    • 3.next('/')或next({path:'/'}):跳转到一个不同的地址。当前导航被中断,进入一个新的导航。

用sessionStorage存储用户token

//路由守卫
router.beforeEach((to, from, next)=>{
  //路由中设置的needLogin字段就在to当中 
  if(window.sessionStorage.data){
   console.log(window.sessionStorage);
   // console.log(to.path) //每次跳转的路径
   if(to.path === '/'){
    //登录状态下 访问login.vue页面 会跳到index.vue
    next({path: '/index'});
   }else{
    next();
   }
  }else{
   // 如果没有session ,访问任何页面。都会进入到 登录页
   if (to.path === '/') { // 如果是登录页面的话,直接next() -->解决注销后的循环执行bug
    next();
   } else { // 否则 跳转到登录页面
    next({ path: '/' });
   }
  }
})

这里用了router.beforeEach vue-router导航守卫

每次跳转时都会判断sessionStorage中是否有token值,如果有则能正常跳转,如果没有那么就返回登录页面。

注销

至此就完成了一个简单的登录状态了,浏览器关闭后sessionStorage会清空的,所以当用户关闭浏览器再打开是需要重新登录的

当然也可以手动清除sessionStorage,清除动作可以做成注销登录,这个就简单了。

loginOut(){
  // 注销后 清除session信息 ,并返回登录页
  window.sessionStorage.removeItem('data');
  this.common.startHacking(this, 'success', '注销成功!');
  this.$router.push('/index'); 
  }

写一个清除sessionStorag的方法。

一个简单的保存登录状态的小Demo。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
详解js的视频和音频采集
Aug 09 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
js中实现继承的五种方法
Jan 25 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 #Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 #Javascript
Koa日志中间件封装开发详解
Mar 09 #Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 #Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 #Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 #Javascript
Node.js Event Loop各阶段讲解
Mar 08 #Javascript
You might like
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
教师开学感言
2014/02/14 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书