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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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实现验证码功能
2006/10/09 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
javascript每日必学之多态
2016/02/23 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python图算法实例分析
2016/08/13 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python ddt实现数据驱动
2018/03/14 Python
python 判断网络连通的实现方法
2018/04/22 Python
python 等差数列末项计算方式
2020/05/03 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
python regex库实例用法总结
2021/01/03 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
见习报告怎么写
2014/10/31 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
法律意见书范本
2015/06/04 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2015年度女工工作总结
2015/10/22 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript