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 相关文章推荐
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
javascript中的delete使用详解
Apr 11 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
JS简单数组排序操作示例【sort方法】
May 17 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
php 一元分词算法
2009/11/30 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
django中forms组件的使用与注意
2019/07/08 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
管理部副部长岗位职责范文
2014/03/09 职场文书
个人投资计划书
2014/05/01 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
法人授权委托书
2014/09/16 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
介绍信模板
2015/01/31 职场文书
车间统计员岗位职责
2015/04/14 职场文书
美丽心灵观后感
2015/06/01 职场文书
导游词之西安大清真寺
2019/12/17 职场文书