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   }  }