前言

之前文章講到如何使用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

已同步到看一看

你的朋友會在“發現-看一看”看到你點選“在看”的內容

取消
傳送

我知道了

已取消，想法已同步刪除

知道了