如何将Vuex-OIDC静态配置迁移至Nuxt runtime运行时配置

第一步：区分OIDC配置属性权限 #

你当前用到的所有OIDC配置项均为前端授权流程必备的公开参数，无敏感后端凭证，全部可以放在publicRuntimeConfig中，无需使用privateRuntimeConfig。

第二步：配置环境变量与nuxt.config.js #

首先在项目根目录创建.env文件，填入对应配置：

OIDC_AUTHORITY=https://***/***.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_***_SIGNUPORSIGNIN
OIDC_CLIENT_ID=************
OIDC_TOKEN_ENDPOINT=https://***/***.onmicrosoft.com/oauth2/v2.0/token?p=B2C_***_SIGNUPORSIGNIN
OIDC_RESPONSE_TYPE=id_token
OIDC_SCOPE=https://***.onmicrosoft.com/***/Read openid

然后修改nuxt.config.js，声明运行时配置：

export default {
  // 其他原有配置
  publicRuntimeConfig: {
    oidc: {
      authority: process.env.OIDC_AUTHORITY,
      clientId: process.env.OIDC_CLIENT_ID,
      token_endpoint: process.env.OIDC_TOKEN_ENDPOINT,
      // redirectUri动态适配当前运行环境，不用写死localhost
      redirectUri: process.env.NODE_ENV === 'development' 
        ? 'http://localhost:3000/oidc-test/oidc-callback'
        : `${process.env.BASE_URL || 'https://你的开发服务器域名'}/oidc-test/oidc-callback`,
      responseType: process.env.OIDC_RESPONSE_TYPE,
      scope: process.env.OIDC_SCOPE
    }
  }
}

第三步：改造store/oidc.js适配运行时配置 #

原代码在顶层直接执行vuexOidcCreateStoreModule无法获取运行时配置，需要改为通过Nuxt插件动态注册vuex-oidc模块：

1. 先删除原有store/oidc.js文件
2. 在plugins目录下新建vuex-oidc.js文件：

import { vuexOidcCreateStoreModule } from 'vuex-oidc'

export default ({ app, store }) => {
  // 从运行时配置获取oidc参数
  const oidcSettings = app.$config.oidc
  // 创建vuex模块
  const oidcStoreModule = vuexOidcCreateStoreModule(
    oidcSettings,
    {
      namespaced: true,
      dispatchEventsOnWindow: true,
      publicRoutePaths: ['/', 'oidc-callback-error']
    },
    // OIDC事件监听
    {
      userLoaded: user => console.log('OIDC user is loaded:', user),
      userUnloaded: () => console.log('OIDC user is unloaded'),
      accessTokenExpiring: () => console.log('Access token will expire'),
      accessTokenExpired: () => console.log('Access token did expire'),
      silentRenewError: () => console.log('OIDC user is unloaded'),
      userSignedOut: () => console.log('OIDC user is signed out')
    }
  )
  // 注册模块到vuex，模块名保持为oidc，不影响原有调用逻辑
  store.registerModule('oidc', oidcStoreModule)
}

3. 在nuxt.config.js中注册该插件：

export default {
  // 其他原有配置
  plugins: [
    '~/plugins/vuex-oidc.js'
  ]
}

第四步：多环境适配 #

不同环境可以创建对应的.env文件（比如.env.development、.env.production），打包或者启动时指定环境变量加载对应配置即可，无需修改代码。

内容的提问来源于stack exchange，提问作者Tiberius