Vue中的驗證登錄狀態

draveness 發布于2019-08-26 13:33 / 2036人閱讀

摘要：用存儲用戶路由守衛路由中設置的字段就在當中每次跳轉的路徑登錄狀態下訪問頁面會跳到如果沒有訪問任何頁面。一個簡單的保存登錄狀態的小。

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)",
    }
  ]
}

然后下載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{
          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。

參考：
騰訊云社區-Vue+SessionStorage實現簡單的登錄
SF-從前后端分別學習——注冊/登錄流程2
Vue-router實現單頁面應用在沒有登錄情況下，自動跳轉到登錄頁面
vue+axios新手實踐實現登陸
Vue實戰(四)登錄/注冊頁的實現
vue頁面控制權限,vuex刷新保存狀態、登錄狀態保存
vue頁面控制權限,vuex刷新保存狀態、登錄狀態保存
(vue.js)前后端分離的單頁應用如何來判斷當前用戶的登錄狀態？
Vue登錄注冊，并保持登錄狀態
vue登錄注冊及token驗證
Vue項目中實現用戶登錄及token驗證

vue-router守衛導航官方文檔：vue-router導航守衛

GPU云服務器云服務器 ECS生命周期中的穩定狀態登錄狀態記住登錄狀態 java 登錄狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109019.html

一個JAVA WEB偽全棧的VUE入坑隨筆:從登錄開始（VUEX）

摘要：此文章用于記錄本人學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。這里的用戶信息和登錄狀態都是直接取的中的用戶信息進行屬性值初始化。此文章用于記錄本人VUE學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。中間的曲折只有自己知道，有...

Zack 2019-08-20 15:47 評論0 收藏0
手摸手，帶你用vue擼后臺系列二(登錄權限篇)

摘要：我們將登錄按鈕上綁上事件，點擊登錄之后向服務端提交賬號和密碼進行驗證。所以前端和后端權限的劃分是不太一致。側邊欄最后一個涉及到權限的地方就是側邊欄，不過在前完整項目地址：vue-element-admin 系列文章：手摸手，帶你用vue擼后臺系列一（基礎篇）手摸手，帶你用vue擼后臺系列二(登錄權限篇) 手摸手，帶你用vue擼后臺系列三 (實戰篇) 手摸手，帶你用vu...

不知名網友 2019-08-20 16:45 評論0 收藏0
基于 Vue 的后臺管理系統前端實踐

摘要：輸入框內容過濾產品有一個需求是，在搜索用戶信息時，只能通過郵箱搜索，并且只能輸入字母數字以及。我選擇了輸入框的值這里的坑就是需要在中更新值，因為元素這時才刷新。是否有一定要用的必要類似的管理系統涉及到不同頁面之間的交互都很少。初始化項目使用 Vue-cli3 初始化項目1 安裝 Element UI安裝 Vue-i18n，做相關配置2,3 原則上需要對 Element 也做 I18...

scwang90 2019-08-23 12:13 評論0 收藏0
vue全家桶仿某魚部分布局以及功能實現

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，也完全能夠為復雜的單頁面應用提供驅動。可以進行確認收貨后刪除訂單。前言每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做...

dreamGong 2019-08-23 11:01 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0