Vue中的驗證登陸狀態的實現方法

Vue項目中實現用戶登陸及token驗證

先說一下個人實現步驟：

1. 使用easy-mock新建登陸接口，模擬用戶數據
2. 使用axios請求登陸接口，匹配帳號和密碼
3. 帳號密碼驗證後， 拿到token，將token存儲到sessionStorage中，並跳轉到首頁
4. 前端每次跳轉時，就使用導航守衛(vue-router.beforeEach)判斷 sessionStorage 中有無 token ，沒有就跳轉到登陸頁面，有則跳轉到對應路由頁面。
5. 註銷後，就清除sessionStorage裏的token信息並跳轉到登陸頁面

使用easy-mock模擬用戶數據

我用的是easy-mock,新建了一個接口，用於模擬用戶數據:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

{   "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中寫好登錄框：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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接口：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

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屬性：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

{   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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

//路由守衛 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，清除動做能夠作成註銷登陸，這個就簡單了。

?

1 2 3 4 5 6

loginOut(){ // 註銷後 清除session信息 ，並返回登陸頁 window.sessionStorage.removeItem( 'data' ); this .common.startHacking( this , 'success' , '註銷成功！' ); this .$router.push( '/index' ); }

寫一個清除sessionStorag的方法。

一個簡單的保存登陸狀態的小Demo。