尝试在 Vue 应用程序中从 config.js 配置 Okta，在 typescript 中答案

【问题标题】：Trying to configure Okta from config.js in a Vue app, in typescript尝试在 Vue 应用程序中从 config.js 配置 Okta，在 typescript 中
【发布时间】：2021-10-18 16:59:40
【问题描述】：

我正在尝试让我们的 vue + okta 应用程序从公共文件夹中的 congif.json 中提取 okta 值（这样我们就可以自动构建和部署到各种环境中）

我正在按照这个模式进行配置。

Vue js with an external configuration file

Okta 是否有使用 okta 和公用文件夹中的 config.json 来保存值的示例（根据偏好在 typescript 中）？

我正在这样做，但它不起作用，是

在 main.ts 中

      const sPath = `${process.env.BASE_URL} ${"config.json"}`;
//      fetch(process.env.BASE_URL + "config.json")
      fetch(sPath)
        .then((response) => response.json())
        .then((config) =>
        {
            Vue.prototype.$config = config;
            new Vue({
                router,
                store,
                render: (h) => h(App)
            }).$mount("#app");
        })

然后在 router\index.ts 中

const confObj = Vue.prototype.$config;// confObj is undefiend here - EWB

//Vue.use( Auth,
//    {
//        confObj,
       
//    } );
debugger;
Vue.use( Auth,
    {
        issuer: confObj.issuer,
        client_id: confObj.client_id,
        redirect_uri: confObj.redirect_uri,
        scopes: [ 'openid', 'profile', 'email' ],
        tokenManager: { storage: 'sessionStorage' },
    } );


Vue.use(VueRouter)

当我找到它时，configObj 仍然未定义。

【问题讨论】：

标签： typescript vue.js configuration

【解决方案1】：

看起来您可能会在获取配置之前在文件顶部导入router/index.ts。

您可以推迟导入，直到提取发生：

// import router from './router' ❌

const sPath = `${process.env.BASE_URL} ${"config.json"}`;
fetch(sPath)
  .then((response) => response.json())
  .then((config) => {
     Vue.prototype.$config = config;

     new Vue({
       router: require('./router'),?
       store,
       render: (h) => h(App)
     }).$mount("#app");
  })

【讨论】：

【解决方案2】：

你应该使用Vue.prototype.$config = require('/public/config.json') 像这样

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$config = require('/public/config.json')
new Vue({
    render: h => h(App),
    beforeCreate: function () {
        console.log(this.$config)
    },
}).$mount('#app')

在你的例子中

Vue.prototype.$config = require('/public/config.json')
const confObj = Vue.prototype.$config;
Vue.use( Auth,
    {
        issuer: confObj.issuer,
        client_id: confObj.client_id,
        redirect_uri: confObj.redirect_uri,
        scopes: [ 'openid', 'profile', 'email' ],
        tokenManager: { storage: 'sessionStorage' },
    } );


Vue.use(VueRouter)

【讨论】：