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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jquery实现显示已选用户
Jul 21 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 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/12/23 PHP
php xfocus防注入资料
2008/04/27 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP7 windows支持
2021/03/09 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python实现爬取图书封面
2018/07/05 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python实现感知器算法(批处理)
2019/01/18 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python处理excel绘制雷达图
2019/10/18 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
幼儿园安全责任书
2014/04/14 职场文书
篮球比赛策划方案
2014/06/05 职场文书
个人合伙协议书范本
2014/10/14 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Pytest中skip skipif跳过用例详解
2021/06/30 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers