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 相关文章推荐
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
利用vue实现模态框组件
Dec 19 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
JavaScript中的 new 命令
May 22 Javascript
Vue基础配置讲解
Nov 29 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 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
咖啡与水的关系
2021/03/03 冲泡冲煮
thinkphp学习笔记之多表查询
2014/07/28 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
电子信息专业自荐书
2014/02/04 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
品酒会策划方案
2014/05/26 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
python基础之爬虫入门
2021/05/10 Python
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技