一、前言

此篇内容较多，我是一步一个脚印(坑)，以至于写了好久，主要是这几部分：后台升级 .NET6  VS2022、前台升级Ant Design Pro V5 、前后台联调 IdentityServer4 实战，以及各部分在Linux环境下部署等等。

二、后台升级.NET6

WebApi和类库都升级到.NET6，依赖包都升级到6.0以上最新，好像没什么感知，略感easy。（附一张写完后最新的项目结构图）

三、IdentityServer4实战

1、用户管理

还好上篇持久化已经做了90%的工作，不过是在Demo里面，现在搬到主项目里来，用户部分、客户端配置部分根据实际情况稍加改动。

这里需要解释一下，用户、角色管理这块可以用Identity进行管理，也可以在业务系统里管理，id4只做登录鉴权，这里只是举个例子，ApplicationUser继承IdentityUser，定义字段UserInfoId关联UserInfo表，具体需求根据项目实际情况来设计。

2、配置修改

简化、授权码是给React前端用的，混合模式给 Mvc 客户端用的（一个空.NET6 Mvc项目，也搬到主项目了，具体的可以看代码）

3、数据迁移

依次在程序包管理器控制台输入迁移命令，其他表结构数据相同就不贴了，上篇持久化过程都有详细步骤和结果。

四、前台升级 Ant Design Pro V5

前台升级 Ant Design Pro V5，之前用的是V5预览版，已经是一年前的事情了。。。我反思。。。

1、安装组件 oidc-client

cnpm install oidc-client --save，新建认证服务类 auth.ts ，跟后台 IdentityServer4 认证服务配合使用。

import { Log, User, UserManager } from 'oidc-client';

export class AuthService {

    public userManager: UserManager;

    constructor() {

        // const clientRoot = 'http://localhost:8000/';

        const clientRoot = 'https://homejok.wintersir.com/';

        const settings = {

            authority: 'https://login.wintersir.com',

            //client_id: 'antdview',

            //response_type: 'id_token token',

            client_id: 'antdviewcode',

            client_secret: 'antdviewcode',

            response_type: 'code',

            redirect_uri: `${clientRoot}callback`,

            post_logout_redirect_uri: `${clientRoot}`,

            // silent_redirect_uri: `${clientRoot}silent-renew.html`,

            scope: 'openid profile HomeJokScope'

        };

        this.userManager = new UserManager(settings);

        Log.logger = console;

        Log.level = Log.WARN;

    }

    public login(): Promise<void> {

        //记录跳转登录前的路由

        return this.userManager.signinRedirect({ state: window.location.href });

    }

    public signinRedirectCallback(): Promise<User> {

        return this.userManager.signinRedirectCallback();

    }

    public logout(): Promise<void> {

        return this.userManager.signoutRedirect();

    }

    public getUser(): Promise<User | null> {

        return this.userManager.getUser();

    }

    public renewToken(): Promise<User> {

        return this.userManager.signinSilent();

    }

}

2、登录认证设置

修改app.tsx，初始化认证服务类，判断登录状态，设置请求后台拦截器，添加 headers 和 token

import type { Settings as LayoutSettings } from '@ant-design/pro-layout';

import { PageLoading } from '@/components/PageLoading';

import type { RequestConfig, RunTimeLayoutConfig } from 'umi';

import { history, Link } from 'umi';

import RightContent from '@/components/RightContent';

import { BookOutlined, LinkOutlined } from '@ant-design/icons';

import { AuthService } from '@/utils/auth';

const isDev = process.env.NODE_ENV === 'development';

const authService: AuthService = new AuthService();

/** 获取用户信息比较慢的时候会展示一个 loading */

export const initialStateConfig = {

    loading: <PageLoading />

};

/**

 * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state

 * */

export async function getInitialState(): Promise<{

    settings?: Partial<LayoutSettings>;

}> {

    const init = localStorage.getItem('init');

    const token = localStorage.getItem('token');

    const user = localStorage.getItem('user');

    if (!token && !init && !user) {

        localStorage.setItem('init', 'true');

        authService.login();

    }

    return {

        settings: {}

    };

}

// ProLayout 支持的api https://procomponents.ant.design/components/layout

export const layout: RunTimeLayoutConfig = ({ initialState }) => {

    const token = localStorage.getItem('token');

    const user = localStorage.getItem('user');

    return {

        rightContentRender: () => <RightContent />,

        disableContentMargin: false,

        waterMarkProps: {

            //content: initialState?.currentUser?.name,

        },

        // footerRender: () => <Footer />,

        onPageChange: () => {

            const { location } = history;

            if (!token && !user && location.pathname != "/callback") {

                authService.login();

            }

        },

        links: isDev

            ? [

                <Link to="/umi/plugin/openapi" target="_blank">

                    <LinkOutlined />

                    <span>OpenAPI 文档</span>

                </Link>,

                <Link to="/~docs">

                    <BookOutlined />

                    <span>业务组件文档</span>

                </Link>,

            ]

            : [],

        menuHeaderRender: undefined,

        // 自定义 403 页面

        // unAccessible: <div>unAccessible</div>,

        ...initialState?.settings,

        //防止未登录闪屏菜单问题

        pure: token ? false : true

    }

};

const authHeaderInterceptor = (url: string, options: RequestOptionsInit) => {

    const token = localStorage.getItem('token');

    const authHeader = { Accept: 'application/json', 'Content-Type': 'application/json', Authorization: 'Bearer ' + token };

    return {

        url: `${url}`,

        options: { ...options, interceptors: true, headers: authHeader },

    };

};

export const request: RequestConfig = {

    //timeout: 10000,

    // 新增自动添加AccessToken的请求前拦截器

    requestInterceptors: [authHeaderInterceptor],

};

3、登录回调、获取用户、登出

（1）添加callback.tsx，这是登录成功的回调地址，保存登录状态token、user等，跳转页面。

import { message, Result, Spin } from 'antd';

import React, { useEffect, useRef, useState } from 'react';

import { AuthService } from '@/utils/auth';

import { useRequest } from 'umi';

import { login } from '@/services/accountService';

const authService: AuthService = new AuthService();

const callback: React.FC = () => {

    const [msg, setMsg] = useState('玩命登录中......');

    const authRedirect = useRef("/");

    const { run, loading } = useRequest(login, {

        manual: true,

        onSuccess: (result, params) => {

            if (result && result.responseData) {

                localStorage.setItem('user', JSON.stringify(result.responseData));

                window.location.href = authRedirect.current;

            } else {

                setMsg('登录失败，即将跳转重新登录......');

                setTimeout(() => {

                    localStorage.removeItem('init');

                    localStorage.removeItem('token');

                    window.location.href = authRedirect.current;

                }, 3000);

            }

        },

        onError: (error) => {

            message.error(error.message);

        }

    });

    useEffect(() => {

        authService.signinRedirectCallback().then(auth => {

            authRedirect.current = auth.state;

            localStorage.setItem('token', auth.access_token);

            run({ account: auth.profile.sub });

        })

    }, [])

    return (

        <>

            <Result status="success" title={<Spin spinning={loading} tip={msg}></Spin>} />

        </>

    )

};

export default callback;

（2）accountService.tsx Umi的useRequest、Request 配合使用

import { request } from 'umi';

export async function login(payload: { account: string }, options?: { [key: string]: any }) {

    return request('/api/Account/Login', {

        method: 'POST',

        params: payload,

        ...(options || {}),

    });

}

AvatarDropdown.tsx 登出核心方法

const onMenuClick = useCallback(

  (event: MenuInfo) => {

    const { key } = event;

    if (key === 'logout') {

      localStorage.removeItem('init');

      localStorage.removeItem('user');

      localStorage.removeItem('token');

      authService.logout();

      return;

    }

    history.push(`/account/${key}`);

  },

  [],

);

4、自定义其他配置

如：PageLoading 等待框组件、defaultSettings.ts 颜色、图标等配置项、routes.ts 路由，详细见代码。

五、Linux服务器部署

1、.NET6 环境

坑1有CentOS7安装.NET6的步骤，其他linux版本参考

2、服务资源分配

因为只有一台服务器，用nginx进行转发：React前端端口80，IdentityServer4端口5000，WebApi资源端口8000，Mvc网站端口9000

启动命令分两步，举个栗子：

cd /指定目录

nohup dotnet ./BKYL.WEB.API.dll &

3、nginx配置https

因为全部使用了https，所有域名、二级域名都搞了ssl证书，一一对应，通过 nginx 配置部署，贴上nginx.conf关键部分以供参考。

如何设置二级域名、申请ssl证书、nginx配置ssl证书，网上资料很多，不再赘述，有需要的可以私

server {

  listen       80;

  server_name  *.wintersir.com;

  rewrite ^(.*)$ https://$host$1;

  #charset koi8-r;

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {

      root   html;

  }

}

server {

  listen       443 ssl;

  server_name  www.wintersir.com wintersir.com;

  ssl_certificate      /app/nginx/conf/index/cert.pem;

  ssl_certificate_key  /app/nginx/conf/index/cert.key;

  ssl_session_cache    shared:SSL:1m;

  ssl_session_timeout  5m;

  ssl_ciphers  HIGH:!aNULL:!MD5;

  ssl_prefer_server_ciphers  on;

  location / {

    root   /app/wintersir/index;

    index  index.html index.htm;

  }

}

server {

  listen       443 ssl;

  server_name  homejok.wintersir.com;

  ssl_certificate      /app/nginx/conf/view/cert.pem;

  ssl_certificate_key  /app/nginx/conf/view/cert.key;

  ssl_session_cache    shared:SSL:1m;

  ssl_session_timeout  5m;

  ssl_ciphers  HIGH:!aNULL:!MD5;

  ssl_prefer_server_ciphers  on;

  location / {

    proxy_set_header X-Forearded-Proto $scheme;

    proxy_set_header Host $http_host;

    proxy_set_header X-Real-IP $remote_addr;		

    add_header 'Access-Control-Allow-Origin' "$http_origin";

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';

    root   /app/wintersir/view;

    index  index.html index.htm;

  }

  location /api/ {

    proxy_set_header X-Forearded-Proto $scheme;

    proxy_set_header Host $http_host;

    proxy_set_header X-Real-IP $remote_addr;		

    add_header 'Access-Control-Allow-Origin' "$http_origin";

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';

    proxy_pass https://www.wintersir.com:8000;

  }

}

server {

  listen       443 ssl;

  server_name  mvc.wintersir.com;

  ssl_certificate      /app/nginx/conf/mvc/cert.pem;

  ssl_certificate_key  /app/nginx/conf/mvc/cert.key;

  ssl_session_cache    shared:SSL:1m;

  ssl_session_timeout  5m;

  ssl_ciphers  HIGH:!aNULL:!MD5;

  ssl_prefer_server_ciphers  on;

  location / {

    proxy_set_header X-Forearded-Proto $scheme;

    proxy_set_header Host $http_host;

    proxy_set_header X-Real-IP $remote_addr;

    add_header 'Access-Control-Allow-Origin' "$http_origin";

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';

    proxy_pass https://www.wintersir.com:9000/;

  }

}

server {

  isten       443 ssl;

  server_name  login.wintersir.com;

  ssl_certificate      /app/nginx/conf/login/cert.pem;

  ssl_certificate_key  /app/nginx/conf/login/cert.key;

  ssl_session_cache    shared:SSL:1m;

  ssl_session_timeout  5m;

  ssl_ciphers  HIGH:!aNULL:!MD5;

  ssl_prefer_server_ciphers  on;

  location / {

    if ($request_method = 'OPTIONS') {

       add_header 'Access-Control-Allow-Origin' "$http_origin";

       add_header 'Access-Control-Allow-Credentials' 'true';

       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

       add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';

       return 200;

    }

    proxy_set_header X-Forearded-Proto $scheme;

    proxy_set_header Host $http_host;

    proxy_set_header X-Real-IP $remote_addr;

    add_header 'Access-Control-Allow-Origin' "$http_origin";

    add_header 'Access-Control-Allow-Credentials' 'true';

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';

    proxy_pass https://www.wintersir.com:5000/;

  }

}

六、效果图

1、React前端

2、Mvc网站测试

七、各种踩坑

1、CentOS8不支持 .NET6

当初阿里云装了CentOS8，现在想哭，边哭边装CentOS7.9，把数据库、nginx等环境又都装一遍（前几篇都有）

CentOS7 安装 .NET6 官方教程 ，分别执行以下命令，中间输入了两次y

sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm

sudo yum install dotnet-sdk-6.0

2、nginx传输数据过大、转发跨域

简单模式 token 等信息带在了回调页面url里，nginx 502 无法跳转，解决参考，nginx http 添加以下代码：

proxy_buffer_size   128k;

proxy_buffers   4 256k;

proxy_busy_buffers_size   256k;

large_client_header_buffers 4 16k;

处理proxy_pass转发：

proxy_set_header X-Forearded-Proto $scheme;

proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;

add_header 'Access-Control-Allow-Origin' "$http_origin";

add_header 'Access-Control-Allow-Credentials' 'true';

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';

处理OPTIONS预检

if ($request_method = 'OPTIONS') {

  add_header 'Access-Control-Allow-Origin' "$http_origin";

  add_header 'Access-Control-Allow-Credentials' 'true';

  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

  add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since,Content-Type';

  return 200;

}

3、js客户端token传输、授权

js（react、vue等）客户端需要在授权服务配置时，设置允许将token通过浏览器传递 AllowAccessTokensViaBrowser = true，客户端设置禁用了授权页面，登录鉴权后直接跳回对应 RequireConsent = false

4、前端统一接口返回格式

Umi框架默认格式与后台接口返回不一致就会导致获取不到，config.ts 加上以下代码，就可以使用后台自定义返回的数据格式了

request: {

    dataField: ""  //忽略框架处理

}

5、PostLogoutRedirectUris无效

本以为配置了退出跳转路由就OK了，结果还是得自己加代码手动跳转，在授权服务中AccountController，Logout方法

6、EFCore连接数据库偶尔异常：An exception has been raised that is likely due to a transient failure.

查资料说是ssl问题，连接字符串server改成https的，不太确定，大佬懂的可以说一下

八、前人栽树，后人乘凉

https://github.com/skoruba/react-oidc-client-js

九、代码已上传

https://github.com/wintersir

十、后续

后面学习要往容器、微服务方向走了，Docker、Jenkins、DDD 等等，想学哪个学哪个，写了也不一定学，哈哈~~~，还是那句话：

_{（个人学习记录分享，坚持更新，也有可能烂尾，最终解释权归本人所有，哈哈哈哈，嗝~~~）}

写在最后

博客名：WinterSir，学习目录 https://www.cnblogs.com/WinterSir/p/13942849.html

最新文章

1. org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [XXX] in DispatcherServlet with name 'springMVC'
2. Spring学习笔记之二----基于XML的Spring AOP配置
3. 通过Nginx,Tomcat访问日志(access log)记录请求耗时
4. 下面是Webstorm的一些常用快捷键：
5. vim使用02
6. HUD5423 Rikka with Tree（DFS）
7. 简单方便统一封装的傻瓜式GET/POST库AliasNet正式公布~开源喽~
8. poj2886Who Gets the Most Candies? (约瑟夫环）
9. 由MyEclipse内存不足谈谈JVM内存设置
10. IIS - HTTP 错误 500.21 - Internal Server Error 处理程序“WebServiceHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
11. Eclipse 每次打开workspace目录记录位置？
12. 使用react native制作的一款网络音乐播放器
13. org.springframework.cache.interceptor.SimpleKey cannot be cast to java.lang.String
14. Android/Linux Thermal框架分析及其Governor对比
15. selenium：chromedriver与chrome版本对应关系
16. GridView中CheckBox单击事件(oncheckedchanged)
17. python SQLAlchemy对象映射和json.dumps无法序列化问题解决
18. django之class Meta
19. iOS 网易彩票-5设置模块二
20. Docker使用rexray做跨主机存储

热门文章

1. HashMap和ConcurrentHashMap的原理和实现
2. Exchange批量删除邮件
3. Exchange统计邮箱数量
4. [ Linux ] 设置服务器开机自启端口
5. C/C++在Win32控制台播放Bad Apple
6. 《码处高效：Java开发手册》之代码风格
7. 计算机编码规则之:Base64编码
8. Java语言学习day39--8月14日
9. python基础练习题（题目 取一个整数a从右端开始的4〜7位。）
10. .NET Core(.NET6)中gRPC注册到Consul