知識星球前言
之前文章講到如何使用Node.js+Express構建JavaScript客戶端，實現前後端分離。本節將介紹如何使用Vue實現前後端分離，文中介紹Vue的知識比較基礎，適合新手學習。
一、搭建Vue專案
前提條件：安裝nodejs、webpack和vue-cli。這個網上很多教程，這裡不多說。
（1）新建Vue專案
Cmd進入建立專案的路徑，輸入：vue init webpack VueJS_Client
新建vuejs_client的Vue專案，安裝npm。
（2）安裝oidc-client庫
使用VSCode開啟vuejs_client專案所在的檔案夾
Ctrl + ~ 開啟控制控制檯，輸入：npm install oidc-client
（3）實現自動跳轉登入頁面
在src檔案夾中開啟HelloWorld.vue檔案，匯入oidc-client模組，若在未登入情況，在元件建立前跳轉登入頁面。程式碼很簡單，直接呼叫登入函式。
（4）指定重定向頁面
可以看到上面的配置，一旦使用者登入到IdentityServer，CallBack就是指定的redirect_uri頁面。
在components檔案夾中新建CallBack.vue檔案，呼叫UserManager函式，實現頁面跳轉。
（5）編寫Home元件
在CallBack中，重定向了Home元件，此時可以獲取到登入使用者的屬性和呼叫介面所需的access_token等。
{{res}}
（6）最後，在Router中新增新建的路由並修改程式啟動埠為5003
二、修改授權服務配置，資源伺服器允許跨域呼叫API
（1）修改授權服務配置
在AuthServer專案，開啟Config.cs檔案，在GetClients中新增JavaScript客戶端配置
// JavaScript Client new Client { ClientId = "js", ClientName = "JavaScript Client", AllowedGrantTypes = GrantTypes.Implicit, AllowAccessTokensViaBrowser = true, RedirectUris = { "http://localhost:5003/CallBack" }, PostLogoutRedirectUris = { "http://localhost:5003 " }, AllowedCorsOrigins = { "http://localhost:5003" }, AllowedScopes = { IdentityServerConstants.StandardScopes.OpenId, IdentityServerConstants.StandardScopes.Profile, "api1" }, }
（2）在資源服務配置允許跨域呼叫api
在ResourceAPI專案，開啟Startup.cs檔案中的ConfigureServices方法，配置CORS，允許Ajax呼叫從http://localhost:5003呼叫http://localhost:5001的Web API。
//JS-allow Ajax calls to be made from http://localhost:5003 to http://localhost:5001. services.AddCors(options => { //this defines a CORS policy called "default" options.AddPolicy("default", policy => { policy.WithOrigins("http://localhost:5003") .AllowAnyHeader() .AllowAnyMethod(); }); });
在Configure方法中將CORS中介軟體新增到管道中
//JS-Add the CORS middleware to the pipeline in Configure: app.UseCors("default");
（3）新增測試用的api介面
新增IdentityController控制器
[Route("[controller]")] public class IdentityController : ControllerBase { [Authorize(Roles ="admin")] [HttpGet] public IActionResult Get() { return new JsonResult(from c in User.Claims select new { c.Type, c.Value }); } }
（4）測試
執行AuthServer專案，執行ResourceAPI專案。
在VSCode終端輸入：npm run dev
開啟瀏覽器：http://localhost:5003/ 自動跳轉到登入頁面
賬號:zhubingjian 密碼:123 登入。跳轉到Home頁面並獲取到使用者的屬性資訊。
呼叫API，滿足授權條件，成功獲取資料。
總結：
本節程式碼儘量簡單化了，並有加太多東西進去。關於IdentityServer4的相關知識和教程，可以看我前面幾篇部落格，都有詳細的教程。
授權服務和資源服務原始碼地址: https://github.com/Bingjian-Zhu/Mvc-HybridFlow.git
Vue Demo原始碼地址：https://github.com/Bingjian-Zhu/Identity_Vue_Client
原文地址：https://www.cnblogs.com/FireworksEasyCool/p/10576911.html
