《使用 IdentityServer 保護(hù) Web 應(yīng)用（AntD Pro 前端 + SpringBoot 后端）》中記錄了使用 IdentityServer 保護(hù)前后端的過程，其中的前端工程是以 UMI Js 為例。今天，再來(lái)記錄一下使用 IdentityServer 保護(hù) Vue 前端的過程，和 UMI Js 項(xiàng)目使用 umi plugin 的方式不同，本文沒有使用 Vue 相關(guān)的插件，而是直接使用了 oidc-client js。

另外，我對(duì) Vue 這個(gè)框架非常不熟，在 vue-router 這里稍微卡住了一段時(shí)間，后來(lái)瞎試居然又成功了。針對(duì)這個(gè)問題，我還去 StackOverflow 上問了，但并沒有收到有效的回復(fù)：https://stackoverflow.com/questions/74769607/how-to-access-vues-methods-from-navigation-guard

(資料圖)

首先，需要在 IdentityServer 服務(wù)器端注冊(cè)該 Vue 前端應(yīng)用，仍然以代碼寫死這個(gè)客戶端為例：

new Client{ClientId = "vue-client",ClientSecrets = { new Secret("vue-client".Sha256()) },ClientName = "vue client",AllowedGrantTypes = GrantTypes.Implicit,AllowAccessTokensViaBrowser = true,RequireClientSecret = false,RequirePkce = true,RedirectUris ={"http://localhost:8080/callback","http://localhost:8080/static/silent-renew.html",},AllowedCorsOrigins = { "http://localhost:8080" },AllowedScopes = { "openid", "profile", "email" },AllowOfflineAccess = true,AccessTokenLifetime = 90,AbsoluteRefreshTokenLifetime = 0,RefreshTokenUsage = TokenUsage.OneTimeOnly,RefreshTokenExpiration = TokenExpiration.Sliding,UpdateAccessTokenClaimsOnRefresh = true,RequireConsent = false,};

yarn add oidc-client

在項(xiàng)目里添加一個(gè) src/security/security.js文件：

import Oidc from "oidc-client"function getIdPUrl() {return "https://id6.azurewebsites.net";}Oidc.Log.logger = console;Oidc.Log.level = Oidc.Log.DEBUG;const mgr = new Oidc.UserManager({authority: getIdPUrl(),client_id: "vue-client",redirect_uri: window.location.origin + "/callback",response_type: "id_token token",scope: "openid profile email",post_logout_redirect_uri: window.location.origin + "/logout",userStore: new Oidc.WebStorageStateStore({store: window.localStorage}),automaticSilentRenew: true,silent_redirect_uri: window.location.origin + "/silent-renew.html",accessTokenExpiringNotificationTime: 10,})export default mgr

不借助任何狀態(tài)管理包，直接將相關(guān)的數(shù)據(jù)添加到 Vue 的 app 對(duì)象上：

import mgr from "@/security/security";const globalData = {isAuthenticated: false,user: "",mgr: mgr}

const globalMethods = {async authenticate(returnPath) {console.log("authenticate")const user = await this.$root.getUser();if (user) {this.isAuthenticated = true;this.user = user} else {await this.$root.signIn(returnPath)}},async getUser() {try {return await this.mgr.getUser();} catch (err) {console.error(err);}},signIn(returnPath) {returnPath ? this.mgr.signinRedirect({state: returnPath}) : this.mgr.signinRedirect();}}

new Vue({router,data: globalData,methods: globalMethods,render: h => h(App),}).$mount("#app")

在 src/router/index.js中，給需要登錄的路由添加 meta 字段：

Vue.use(VueRouter)const router = new VueRouter({{path: "/private",name: "private page",component: resolve => require(["@/pages/private.vue"], resolve),meta: {requiresAuth: true}}});export default router

接著，正如在配置中體現(xiàn)出來(lái)的，需要一個(gè)回調(diào)頁(yè)面來(lái)接收登錄后的授權(quán)信息，這可以通過添加一個(gè) src/views/CallbackPage.vue文件來(lái)實(shí)現(xiàn)：

<script>export default {async created() {try {const result = await this.$root.mgr.signinRedirectCallback();const returnUrl = result.state ?? "/";await this.$router.push({path: returnUrl})}catch(e){await this.$router.push({name: "Unauthorized"})}}}</script>

然后，需要在路由里配置好這個(gè)回調(diào)頁(yè)面：

import CallbackPage from "@/views/CallbackPage.vue";Vue.use(VueRouter)const router = new VueRouter({routes: {path: "/private",name: "private page",component: resolve => require(["@/pages/private.vue"], resolve),meta: {requiresAuth: true}},{path: "/callback",name: "callback",component: CallbackPage}});export default router

同時(shí)，在這個(gè) router 里添加一個(gè)所謂的“全局前置守衛(wèi)”（https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB），注意就是這里，我碰到了問題，并且在 StackOverflow 上提了這個(gè)問題。在需要調(diào)用前面定義的認(rèn)證方法時(shí)，不能使用 router.app.authenticate，而要使用 router.apps[1].authenticate，這是我通過 inspect router發(fā)現(xiàn)的：

...router.beforeEach(async function (to, from, next) {let app = router.app.$data || {isAuthenticated: false}if(app.isAuthenticated) {next()} else if (to.matched.some(record => record.meta.requiresAuth)) {router.apps[1].authenticate(to.path).then(()=>{next()})}else {next()}})export default router

到了這一步，應(yīng)用就可以跑起來(lái)了，在訪問 /private 時(shí)，瀏覽器會(huì)跳轉(zhuǎn)到 IdentityServer 服務(wù)器的登錄頁(yè)面，在登錄完成后再跳轉(zhuǎn)回來(lái)。

注意 security.js，我們啟用了 automaticSilentRenew，并且配置了 silent_redirect_uri的路徑為 silent-renew.html。它是一個(gè)獨(dú)立的引用了 oidc-client js 的 html 文件，不依賴 Vue，這樣方便移植到任何前端項(xiàng)目。

首先，將我們安裝好的 oidc-client 包下的 node_modules/oidc-client/dist/oidc-client.min.js文件，復(fù)制粘貼到 public/static目錄下。

然后，在這個(gè)目錄下添加 public/static/silent-renew.html文件。

<script src="oidc-client.min.js"></script><script>console.log("renewing tokens");new Oidc.UserManager({userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })}).signinSilentCallback();</script>

最后，給 API 請(qǐng)求添加上認(rèn)證頭。前提是，后端接口也使用同樣的 IdentityServer 來(lái)保護(hù)（如果是 SpringBoot 項(xiàng)目，可以參考《[使用 IdentityServer 保護(hù) Web 應(yīng)用（AntD Pro 前端 + SpringBoot 后端） - Jeff Tian的文章 - 知乎](https://zhuanlan.zhihu.com/p/533197284) 》）；否則，如果 API 是公開的，就不需要這一步了。

對(duì)于使用 axios 的 API 客戶端，可以利用其 request interceptors，來(lái)統(tǒng)一添加這個(gè)認(rèn)證頭，比如：

import router from "../router"import Vue from "vue";const v = new Vue({router})const service = axios.create({// 公共接口--這里注意后面會(huì)講baseURL: process.env.BASE_API,// 超時(shí)時(shí)間 單位是ms，這里設(shè)置了3s的超時(shí)時(shí)間timeout: 20 * 1000});service.interceptors.request.use(config => {const user = v.$root.user;if(user) {const authToken = user.access_token;if(authToken){config.headers.Authorization = `Bearer ${authToken}`;}}return config;}, Promise.reject)export default service