reactjs 配置Azure静态Web应用的应用程序设置(React MSAL)

gfttwv5a  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(135)

我正在学习React应用程序中每个环境的MSAL身份验证。
authConfig.ts

import { Configuration } from "@azure/msal-browser";
import { envConfig } from "./config";

// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
    auth: {
        clientId: envConfig.msalConfig.uiClientId,
        authority: `https://login.microsoftonline.com/${envConfig.msalConfig.tenantId}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

// scopes
export const loginRequest = {
    scopes: envConfig.msalConfig.scopes
  };

// endpoints 
export const config = {
    endpoint: `${envConfig.msalConfig.serviceBaseUrl}/api/v1/items`
};

IEnvConfig:

export interface IEnvConfig {  
  env: string;
  msalConfig: {
    uiClientId: string;
    authority: string;
    apiClientId: string;
    tenantId: string;
    serviceBaseUrl: string;
    scopes: string[];
  };
}

prod.ts

import { IEnvConfig } from "../config";

export const prod: IEnvConfig = {  
  env: "PROD",
  msalConfig: {
    uiClientId: "",
    authority: "https://login.microsoftonline.com/",
    apiClientId: "",
    tenantId: "tenantId",
    serviceBaseUrl: "https://xxx.azurewebsites.net",
    scopes: []
  },

};

内部

export const int: IEnvConfig = {  
  env: "INT",
  msalConfig: {
    uiClientId: "",
    authority: "https://login.microsoftonline.com/",
    apiClientId: "",
    tenantId: "tenantId",
    serviceBaseUrl: "https://xxx.azurewebsites.net",
    scopes: []
  },
};

用户名:

export const ua: IEnvConfig = {  
  env: "UA",
  msalConfig: {
    uiClientId: "",
    authority: "https://login.microsoftonline.com/",
    apiClientId: "",
    tenantId: "tenantId",
    serviceBaseUrl: "https://xxx.azurewebsites.net",
    scopes: []
  },
};

如何根据环境选择配置值?如何检查我所处的环境?

lb3vh1jj

lb3vh1jj1#

而不是每个env声明一个对象(ua, int, prod等),你应该只使用一个全局对象(即config),并在构建过程中设置其值。查看Customizing Environment Variables for Arbitrary Build EnvironmentsAdding Custom Environment Variables以获取更多信息。

相关问题