如何在process.env的"auth“部分使用nuxt.config.js

Question

我对Nuxt很陌生(使用Nuxt2.15.3+ Vue2 + Javascript)。

在AUTH_PROVIDER_URL环境变量方面，我遇到了一些困难，该变量设置在本地设置、临时服务器和生产环境中是不同的。我100%确信环境变量在每个环境中都是正确设置的。

我遇到的问题是，在nuxt.config.js文件和"auth“部分中，我需要针对每个环境(本地、暂存、生产)指向不同的URL。

https://auth.nuxtjs.org/schemes/oauth2#options

在我的nuxt.config.js中有：

authorization: process.env.AUTH_PROVIDER_URL + '/auth',
userInfo: process.env.AUTH_PROVIDER_URL + '/userinfo',
logout: process.env.AUTH_PROVIDER_URL + '/logout',

当我在开发中启动应用程序(npm run dev)和生产模式(npm run build，npm run start)时，这在我的计算机上工作得很好。urls的变量(授权、userInfo和注销)将根据process.env.AUTH_PROVIDER_URL语句正确设置。

但是，当我将其部署并运行到暂存和生产服务器时，process.env.AUTH_PROVIDER_URL会返回未定义的结果。"process.env“似乎没有在暂存和生产服务器上的nuxt.config.js文件中的"auth”上下文中找到AUTH_PROVIDER_URL环境变量。

使用process.env (如下面所示的nuxt.config.js文件)在本地、在暂存服务器和在生产服务器上都可以工作，并且变量的设置是正确的。

export default {
  auth_provider_url: process.env.AUTH_PROVIDER_URL,

  publicRuntimeConfig: {
    auth_provider_url: process.env.AUTH_PROVIDER_URL,
  },

}

为什么process.env在nuxt.config.js文件中的上下文中工作得很好，而在nuxt.config.js中的"auth“上下文中却不工作呢？我可以在nuxt.config.js文件的"auth“部分访问这些变量吗？

在nuxt.config.js文件中的"auth“部分中，处理(使用)环境变量的首选/正确方法是什么？

Answer 1

我也有同样的问题。process.env可以在nuxt.config.js文件的其他部分使用，但不能在auth部分中使用。我想问题是auth是在初始化process.env之前配置的。

如果您还在使用Nuxt模块的v5，@nuxtjs/auth-next，那么您可以遵循这个解决方案。

首先，扩展Oauth2Scheme，以便它接受环境变量。

runtimeConfigurableScheme.ts

import { Oauth2Scheme } from '@nuxtjs/auth-next/dist/runtime.js';
import { Auth, Oauth2SchemeOptions } from '@nuxtjs/auth-next/dist/runtime';
import { SchemePartialOptions } from '@nuxtjs/auth-next';

export default class RuntimeConfigurableOauth2Scheme extends Oauth2Scheme {
  constructor ($auth: Auth, options: SchemePartialOptions<Oauth2SchemeOptions>) {
    const configOptions = {
      ...options,
      ...$auth.ctx.$config.auth.strategies[options.name]
    };
    super($auth, configOptions);
  }
}

然后在nuxt.config.js文件中使用它，如下所示：

auth: {
  strategies: {
    custom: {
      scheme: '/path/to/runtimeConfigurableScheme.ts'
    }
  }
},

publicRuntimeConfig: {
  auth: {
    strategies: {
      custom: {
        endpoints: {
          authorization: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/auth`,
          token: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/token`,
          userInfo: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/userinfo`,
          logout: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/logout?redirect_uri=${encodeURIComponent(process.env.LOGOUT_REDIRECT_URL)}`
        },
        token: {
          property: 'access_token',
          type: 'Bearer',
          name: 'Authorization',
          maxAge: 300
        },
        refreshToken: {
          property: 'refresh_token',
          maxAge: 60 * 60 * 24 * 30
        },
        responseType: 'code',
        grantType: 'authorization_code',
        clientId: process.env.CLIENT_ID,
        scope: ['openid', 'profile', 'email', 'org'],
        codeChallengeMethod: 'S256'
      }
    }
  }
}

它可以在组件中调用，例如，this.$auth.loginWith('custom')。

Answer 2

process.env是您在系统上定义的环境变量。在本地情况下，您可能有一个包含这些键的.env文件，当您运行npm run dev时，它会自动为您加载它们。

现在，当您构建应用程序时，一些环境变量在构建阶段会被替换，所以当您这样做时，您需要让它们可用，但是有些环境变量没有，所以您需要在运行时在服务器上设置它们。