亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue-nuxt?登錄鑒權(quán)的實現(xiàn)

 更新時間:2021年12月13日 08:55:09   作者:ThinkerWing  
本文主要介紹了vue-nuxt?登錄鑒權(quán)的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

介紹

來自mentor的梳理,做個總結(jié)和記錄

鏈接

https://auth.nuxtjs.org/api/options/#cookie

開始

在這里插入圖片描述

根據(jù)這個文檔描述,在使用@nuxt/auth 后,如果沒有顯示指定cookie: false, 則auth token 會被默認存儲在 cookie 里 (前面localstorage 也是一樣)
所以在 login接口成功后,token 就會以 auth._token.{provider} 的形式存儲

之后接口在請求時從cookie里拿token并作為接口憑證 發(fā)送給服務(wù)端。

在這里插入圖片描述

目錄結(jié)構(gòu)

在這里插入圖片描述

nuxt-dist 是每次npm run dev 或者 npm run build 后 webpack生成的文件,這里面的代碼可以看做是我們最后實際調(diào)用的代碼 (也可以直接在這里修改和debug,但每次重新跑項目就會還原)。

nuxt/auth 有幾個schemes 方案,比如看這個 nuxt-dist/auth/schemes/local.js
這里有幾個默認選項:

在這里插入圖片描述

在我們寫的代碼里,是用 $auth.loginWith 調(diào)用的方式,而實際上,loginWith最終還是調(diào)用的是 login

在這里插入圖片描述

那看下login, 還是在 nuxt-dist/auth/schemes/local.js里

在這里插入圖片描述

nuxt-dist 是每次npm run dev 或者 npm run build 后 webpack生成的文件,這里面的代碼可以看做是我們最后實際調(diào)用的代碼 (也可以直接在這里修改和debug,但每次重新跑項目就會還原)。
nuxt/auth 有幾個schemes 方案,比如看這個 nuxt-dist/auth/schemes/local.js
這里有幾個默認選項:

在我們寫的代碼里,是用 $auth.loginWith 調(diào)用的方式,而實際上,loginWith最終還是調(diào)用的是 login

那看下login, 還是在 nuxt-dist/auth/schemes/local.js里

方法里的this.name, 就是auth.strategy, 也就是 local, local1 那些, 并且在上面 loginWith 方法里的 setStrategy() 將 auth.strategy 信息存到本地。
成功后,tokenRequired 默認為true, 調(diào)用了 this.$auth.setToken, 這個方法在auth/schemes/auth.js 里

這個方法里的

在這里插入圖片描述

在這個方法里,_key 被組裝成了._token.local
這個方法在 auth/storage.js 里

在這里插入圖片描述

最終這個方法調(diào)用了 setCookie 和 serLocalStorage 方法, 把token存在coookie 和 localstorage里
而在setCookie里,再次組裝,加上了cookir.prefix ,默認是auth

在這里插入圖片描述

在這里插入圖片描述

最終經(jīng)過序列化后,存儲在cookie里。
后續(xù)axios則直接在cookir里拿,并隨請求發(fā)送。

在這里插入圖片描述

整個登錄和鑒權(quán)邏輯基本就是這樣。

繼續(xù)往代碼中走

nuxt.config.js 中還可以配置多個 auth: {strategies: {local

微信登錄,手機號登錄,賬號登陸…

在這里插入圖片描述

autoFetch

https://auth.nuxtjs.org/schemes/local
Fetch User
uth 模塊不保存有關(guān)用戶的信息,因此需要有一種方法來獲取用戶的信息,例如頁面重新加載。這就是用戶端點的用途。默認情況下,這也會在成功登錄后調(diào)用。

如果user.autoFetch為 true (默認),則endpoints.user在成功登錄后立即發(fā)送請求 。該端點應(yīng)使用特定用戶的 JSON 信息進行響應(yīng),該信息直接分配給user 屬性。

如果您希望直接從登錄會話返回用戶信息,請配置user.autoFetch為 false,從loginWith響應(yīng)中獲取用戶信息 ,并將其傳遞給setUser.

如果要完全禁用獲取用戶信息,請設(shè)置endpoints.user: false. 這意味著永遠不會調(diào)用用戶信息端點,但也意味著前端對用戶一無所知;this.$auth.user將{}。

ps: 由于需要對接口進行替換,user會自動去查詢,造成的報錯不利于開發(fā),可以通過注釋,一步一步向下開發(fā)。

user: {
          autoFetch: false,
      },

在這里插入圖片描述

proxy配置

項目的后端接口基于后端低代碼平臺和java接口,接口開頭的名稱不一致,可以通過proxy來處理,也可以解決跨域問題。

	axios: {
    // // baseURL:''
    proxy: true,
    prefix: '/',
    // credentials: false,
  },
   proxy: {
    '/biz': {
      target: 'http://xxlb/',
      pathRewrite: {
        '^/biz': '/biz/',
        changeOrigin: true // 表示是否跨域
      }
    },
    '/front': {
      target: 'http://xxlb/',
      pathRewrite: {
        '^/front': '/api/front',
        changeOrigin: true // 表示是否跨域
      }
    },

請求攔截

	axios: {
    // // baseURL:''
    proxy: true,
    prefix: '/',
    // credentials: false,
  },
   proxy: {
    '/biz': {
      target: 'http://xxlb/',
      pathRewrite: {
        '^/biz': '/biz/',
        changeOrigin: true // 表示是否跨域
      }
    },
    '/front': {
      target: 'http://xxlb/',
      pathRewrite: {
        '^/front': '/api/front',
        changeOrigin: true // 表示是否跨域
      }
    },

處理不同前綴的接口

dev 用于本地dev環(huán)境,部署至服務(wù)器不能這么用。
你定義一個文件,比如叫 apiPrefix.js
這個文件里,你枚舉出所有不同的接口和他們前綴的對應(yīng)關(guān)系

const temp = {
api: ['/front/login', ‘xxxxxx', ‘xxxxx'],
api2: ['/test', ‘xxxxxx'],
xxx: […]
}

這樣等于說顯式的把你所有的需要用到前綴的接口,都列舉出來了。
在axios的請求攔截里,根據(jù)當(dāng)前的請求url,去遍歷temp, 判斷出是屬于哪個前綴的,然后組裝上去。
對于那些在這個temp里無法找到歸屬的請求,那就是默認不需要加前綴的,直接放過好了。

這樣的好處有三個,
一是你維護的時候,能一眼看出,你的哪些接口,是需要加什么樣前綴的
二是,你在頁面發(fā)起請求的時候,能保證同樣的調(diào)用方式,不需要在每個url上改動。
三是如果后續(xù)批量前綴修改,你改的容易

如果生產(chǎn)環(huán)境需要調(diào)用其他服務(wù)器接口,那肯定也是要有一定規(guī)則的,有規(guī)則的話,我們匹配規(guī)則然后修改。
或者是一部分接口。那這樣的話,我們也可以用上述這種類似的方法,無非是變成了

const temp = {
http://10.0.0.1/api: ['/front/login', ‘xxxxxx', ‘xxxxx'],
http://10.0.0.1/api2: ['/test', ‘xxxxxx'],
http://10.0.0.1/xxx: […],
…
http://10.0.1.111/api: ['/sth/xxx']
}

將前綴范圍,擴展到包含協(xié)議和域名

動態(tài)路由的配置

https://www.nuxtjs.cn/guide/routing
你會發(fā)現(xiàn)名稱為 users-id 的路由路徑帶有 :id? 參數(shù),表示該路由是可選的。如果你想將它設(shè)置為必選的路由,需要在 users/_id 目錄內(nèi)創(chuàng)建一個 index.vue 文件。

在這里插入圖片描述

nuxt-dist會自動打包生成配置

在這里插入圖片描述

重定向及auth權(quán)限

https://auth.nuxtjs.org/guide/middleware
這里說的是 auth的權(quán)限驗證 可以放在全局 也可以放在每個路由里。也可以關(guān)閉,以便中間件跳過檢查。最后它還介紹了一種用法,guest 模式,就是說訪問這個路由不必非得登錄,但是如果是登錄用戶訪問此頁面,則會被重定向到 redirect.home 所設(shè)置的路由

在這里插入圖片描述

在這里插入圖片描述

場景
有些場景需要登陸狀態(tài)下才能訪問,不然就會被重定向到/login頁面,現(xiàn)在做了處理,就可以通過設(shè)置auth:false,來處理一些頁面,讓他不用重定向到login,如我現(xiàn)在所遇到的一個頁面,是通過后臺生成一個注冊鏈接,然后才能注冊的,這個頁面不需要token信息。

到此這篇關(guān)于vue-nuxt 登錄鑒權(quán)的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue-nuxt 登錄鑒權(quán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器

    elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器

    這篇文章主要為大家詳細介紹了elementui+vue+axios實現(xiàn)文件上傳本地服務(wù)器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • vue實現(xiàn)下拉菜單效果

    vue實現(xiàn)下拉菜單效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)下拉菜單效果,運用了hover顯示與隱藏以及定位,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)(pdf/word/excel表格)

    vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)(pdf/word/excel表格)

    最近在項目中要做一個pdf在線預(yù)覽的功能,索性給大家整理個全面的,這篇文章主要給大家介紹了關(guān)于vue項目中常見的三種文件類型在線預(yù)覽實現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下
    2022-05-05
  • vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題

    vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題

    這篇文章主要介紹了vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue.js實現(xiàn)點擊圖標放大離開時縮小的代碼

    vue.js實現(xiàn)點擊圖標放大離開時縮小的代碼

    這篇文章主要介紹了vue.js實現(xiàn)點擊圖標放大離開時縮小,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-01
  • Avue和Element-UI動態(tài)三級表頭的實現(xiàn)

    Avue和Element-UI動態(tài)三級表頭的實現(xiàn)

    本文主要介紹了Avue和Element-UI動態(tài)三級表頭的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • vue如何獲取自定義元素屬性參數(shù)值的方法

    vue如何獲取自定義元素屬性參數(shù)值的方法

    這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • vue init webpack myproject構(gòu)建項目 ip不能訪問的解決方法

    vue init webpack myproject構(gòu)建項目 ip不能訪問的解決方法

    下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項目 ip不能訪問的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法

    說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法

    這篇文章主要介紹了說說如何在Vue.js中實現(xiàn)數(shù)字輸入組件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue實現(xiàn)手機號碼抽獎上下滾動動畫示例

    vue實現(xiàn)手機號碼抽獎上下滾動動畫示例

    本篇文章主要介紹了vue實現(xiàn)手機號碼抽獎上下滾動動畫示例。具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10

最新評論