成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue中的驗證登錄狀態(tài)

draveness / 2085人閱讀

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

Vue項目中實現(xiàn)用戶登錄及token驗證

先說一下我的實現(xiàn)步驟：

使用easy-mock新建登錄接口，模擬用戶數(shù)據(jù)

使用axios請求登錄接口，匹配賬號和密碼

賬號密碼驗證后， 拿到token，將token存儲到sessionStorage中，并跳轉(zhuǎn)到首頁

前端每次跳轉(zhuǎn)時，就使用導(dǎo)航守衛(wèi)(vue-router.beforeEach)判斷 sessionStorage 中有無 token ，沒有就跳轉(zhuǎn)到登錄頁面，有則跳轉(zhuǎn)到對應(yīng)路由頁面。

注銷后，就清除sessionStorage里的token信息并跳轉(zhuǎn)到登錄頁面

使用easy-mock模擬用戶數(shù)據(jù)

我用的是easy-mock,新建了一個接口，用于模擬用戶數(shù)據(jù):

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

然后下載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("連接數(shù)據(jù)庫失??！")
        })
      }

這一步最重要的是當賬號密碼正確時，把請求回來的token放在sessionStorage中，

配置路由

然后配置路由新加一個meta屬性：

    {
      path: "/",
      name: "login",
      component: login,
      meta:{
        needLogin: false
      }
    },
    {
      path: "/index",
      name: "index",
      component: index,
      meta:{
        needLogin: true
      }
    }

判斷每次路由跳轉(zhuǎn)的鏈接是否需要登錄，

導(dǎo)航衛(wèi)士

在main.js中配置一個全局前置鉤子函數(shù)：router.beforeEach（），他的作用就是在每次路由切換的時候調(diào)用
這個鉤子方法會接收三個參數(shù)：to、from、next。
to：Route：即將要進入的目標的路由對象，
from：Route：當前導(dǎo)航正要離開的路由，
next：Function：個人理解這個方法就是函數(shù)結(jié)束后執(zhí)行什么，先看官方解釋
1.next()：進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是confirmed（確認的），
2.next(false)：中斷當前的導(dǎo)航。如果瀏覽器的url改變了（可能是用戶手動或瀏覽器后退按鈕），那么url地址會重置到from路由對應(yīng)的地址。
3.next("/")或next({path:"/"})：跳轉(zhuǎn)到一個不同的地址。當前導(dǎo)航被中斷，進入一個新的導(dǎo)航。

用sessionStorage存儲用戶token 
//路由守衛(wèi)
router.beforeEach((to, from, next)=>{
    //路由中設(shè)置的needLogin字段就在to當中 
    if(window.sessionStorage.data){
      console.log(window.sessionStorage);
      // console.log(to.path) //每次跳轉(zhuǎn)的路徑
      if(to.path === "/"){
        //登錄狀態(tài)下 訪問login.vue頁面 會跳到index.vue
        next({path: "/index"});
      }else{
        next();
      }
    }else{
      // 如果沒有session ,訪問任何頁面。都會進入到 登錄頁
      if (to.path === "/") { // 如果是登錄頁面的話，直接next() -->解決注銷后的循環(huán)執(zhí)行bug
        next();
      } else { // 否則 跳轉(zhuǎn)到登錄頁面
        next({ path: "/" });
      }
    }
})

這里用了router.beforeEach vue-router導(dǎo)航守衛(wèi)
每次跳轉(zhuǎn)時都會判斷sessionStorage中是否有token值，如果有則能正常跳轉(zhuǎn)，如果沒有那么就返回登錄頁面。

注銷

至此就完成了一個簡單的登錄狀態(tài)了，瀏覽器關(guān)閉后sessionStorage會清空的，所以當用戶關(guān)閉瀏覽器再打開是需要重新登錄的

當然也可以手動清除sessionStorage，清除動作可以做成注銷登錄，這個就簡單了。

    loginOut(){
    // 注銷后 清除session信息 ，并返回登錄頁
    window.sessionStorage.removeItem("data");
    this.common.startHacking(this, "success", "注銷成功！");
    this.$router.push("/index"); 
    }

寫一個清除sessionStorag的方法。
一個簡單的保存登錄狀態(tài)的小Demo。

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

vue-router守衛(wèi)導(dǎo)航官方文檔：vue-router導(dǎo)航守衛(wèi)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/109019.html

相關(guān)文章

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

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

    Zack 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)

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

    不知名網(wǎng)友 評論0 收藏0

  • 基于 Vue 的后臺管理系統(tǒng)前端實踐

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

    scwang90 評論0 收藏0

  • vue全家桶仿某魚部分布局以及功能實現(xiàn)

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

    dreamGong 評論0 收藏0

  • VUE知識點集錦

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

    Tecode 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<