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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
Express的路由详解
Dec 10 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
angular 服务随记小结
2019/05/06 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python随机数分布random测试
2018/08/27 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python对wav文件的重采样实例
2020/02/25 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
感恩父母的演讲稿
2014/05/06 职场文书
创先争优标语
2014/06/27 职场文书
超市促销活动总结
2014/07/01 职场文书
班级出游活动计划书
2014/08/15 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
教师业务学习材料
2014/12/16 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
撤诉状格式范本
2015/05/19 职场文书
水浒传读书笔记
2015/06/25 职场文书