IdentityServer4-先後端分離之Vue（七）

時間 2019-12-08

標籤 identityserver4 identityserver 後端分離 vue 简体版

原文原文鏈接

前言

以前文章講到如何使用Node.js+Express構建JavaScript客戶端，實現先後端分離。本節將介紹如何使用Vue實現先後端分離，文中介紹Vue的知識比較基礎，適合新手學習。html

1、搭建Vue項目

前提條件：安裝nodejs、webpack和vue-cli。這個網上不少教程，這裏很少說。vue

（1）新建Vue項目node

Cmd進入建立項目的路徑，輸入：vue init webpack VueJS_Clientwebpack

新建vuejs_client的Vue項目，安裝npm。git

（2）安裝oidc-client庫github

使用VSCode打開vuejs_client項目所在的文件夾web

Ctrl + ~ 打開控制控制檯，輸入：npm install oidc-clientvue-cli

（3）實現自動跳轉登陸頁面npm

在src文件夾中打開HelloWorld.vue文件，導入oidc-client模塊，若在未登陸狀況，在組件建立前跳轉登陸頁面。代碼很簡單，直接調用登陸函數。後端

<template></template>

<script>
import Oidc from "oidc-client";

var config = {
  authority: "http://localhost:5000",
  client_id: "js",
  redirect_uri: "http://localhost:5003/CallBack",
  response_type: "id_token token",
  scope: "openid profile api1",
  post_logout_redirect_uri: "http://localhost:5003/"
};
var mgr = new Oidc.UserManager(config);
export default {
  beforeCreate() {
    mgr.signinRedirect();
  }
};
</script>

（4）指定重定向頁面

能夠看到上面的配置，一旦用戶登陸到IdentityServer，CallBack就是指定的redirect_uri頁面。

在components文件夾中新建CallBack.vue文件，調用UserManager函數，實現頁面跳轉。

  <template>
  </template>

<script>
import Oidc from "oidc-client";

new Oidc.UserManager()
  .signinRedirectCallback()
  .then(function() {
    window.location = "/#/Home";
  })
  .catch(function(e) {
    
  });
  export default{}
</script>

（5）編寫Home組件

在CallBack中，重定向了Home組件，此時能夠獲取到登陸用戶的屬性和調用接口所需的access_token等。

<template>
  <div>
    <button @click="api">調用API</button>
    <button @click="logout">退出登陸</button>
    <pre>{{res}}</pre>
  </div>
</template>

<script>
import Oidc from "oidc-client";

var config = {
  authority: "http://localhost:5000",
  client_id: "js",
  redirect_uri: "http://localhost:5003/CallBack",
  response_type: "id_token token",
  scope: "openid profile api1",
  post_logout_redirect_uri: "http://localhost:5003/"
};
var mgr = new Oidc.UserManager(config);
export default {
  name: "Home",
  data() {
    return {
      res: "My Home"
    };
  },

  methods: {
    api() {
var that=this;
      mgr.getUser().then(function(user) {
        var url = "http://localhost:5001/identity";

        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = function() {
           that.res = (xhr.status, JSON.parse(xhr.responseText))
        };
        xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
        xhr.send();
      });
    },
    logout() {
      mgr.signoutRedirect();
    }
  },
  mounted() {
    var that=this;
    mgr.getUser().then(function(user) {
      if (user) {
        // this.res = ("User logged in", user.profile);注意閉包
        that.res = ("User logged in", user.profile);
      } else {
         that.res = ("User not logged in");
      }
    });
  }
};
</script>

<style scoped>
</style>

（6）最後，在Router中添加新建的路由並修改程序啓動端口爲5003

2、修改受權服務配置，資源服務器容許跨域調用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 });
        }
}