Vue中的验证登录状态的实现方法

Vue项目中实现用户登录及token验证

先说一下我的实现步骤：

使用easy-mock新建登录接口，模拟用户数据 使用axios请求登录接口，匹配账号和密码 账号密码验证后， 拿到token，将token存储到sessionStorage中，并跳转到首页 前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。 注销后，就清除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   }  }