Vue使用OAuth2簡化模式登入

oauth2是乙個基於令牌的安全框架，主要使用在第三方認證登入場景，關於oauth2的相關知識可以參考——理解oauth 2.0，這裡暫不詳細介紹。

這裡簡單介紹一下簡化模式，簡化模式，可以通過客戶端名稱和乙個redirect_uri，訪問認證伺服器，認證伺服器認證之後，直接返回乙個令牌，該令牌會在redirect_uri的後邊使用#連線。例如：

// 請求url

// 認證之後，重定向結果：
&state=xyz&token_type=example&expires_in=3600

spring cloud微服務系統中，多個服務基本都需要進行身份認證，因此，可以使用oauth2的認證授權方式，單獨建立乙個使用者認證的微服務，解決整個系統的認證問題。如果只是微服務系統，我們可以使用密碼模式，來做乙個登陸頁面，輸入使用者名稱和密碼，可以看起來像乙個完成的系統。

但是，考慮到可能會和其他系統配合使用的情況，決定做成乙個單點登陸的模式，所有的系統認證時，都去認證伺服器登陸，認證伺服器自己提供乙個登陸介面。

根據oauth2的簡化模式的相關特性，如果vue使用該模式，可以將請求的redirect_uri設定為vue的根目錄，然後，根據當前請求路徑的hash獲取令牌資訊。

實現方法，定義全域性路由守衛：使用vue的全域性路由守衛，如果沒有token的話，從請求中獲取hash,如果hash中的token資訊為空，則去認證伺服器認證:

import router from

'./router'
import store from
'./store'
import nprogress from
'nprogress'
// progress bar
import
'nprogress/nprogress.css'
// progress bar style
import
from
'@/utils/auth'
// gettoken from cookie
import
from
'@/utils/hasperm'
import
from
"./utils/validate"
;nprogress.
configure()
router.
beforeeach
((to,
from
, next)
=>
else
else
)settoken
(tokenmap.
get(
'access_token'))
store.
dispatch
('set_token'
, tokenmap.
get(
'access_token'))
// <4> 將路由再次跳轉到主介面，主要是去掉hash中的內容
router.
push()
nprogress.
done()
}}})
router.
aftereach((
)=>
)

而我們知道vue-router預設使用 hash 模式，也會有乙個#，因此

OAuth2 模式介紹

1.憑證 客戶端 模式 allowedgranttypes granttypes.clientcredentials 應用場景 客戶端 服務與服務之間的互動訪問資源，token代表客戶端的請求，而不是使用者，攜帶客戶端註冊時候的貧據進行認證，獲取token,使用過程 會向token endpoint...

Oauth2 四種模式

1.隱式授權模式 implicit grant 第一步 使用者訪問頁面時，重定向到認證伺服器。第二步 認證伺服器給使用者乙個認證頁面，等待使用者授權。第三步 使用者授權，認證伺服器想應用頁面返回token 第四步 驗證token，訪問真正的資源頁面 授權碼授權模式 authorization cod...

OAuth2四種模式

二 授權碼授權模式 authorization code grant 三 密碼模式 resource owner password credentials grant 四 客戶端憑證模式 client credentials grant 第一步 使用者訪問頁面時，重定向到認證伺服器。第二步 認證伺服...