Question

我目前正在努力在我的Vue应用中实施OAuth身份验证。

认证逻辑由两个文件src/auth.js和public/silent-renewal.html组成。第一个文件包含与OAuth服务器进行交互的所有逻辑。当访问令牌在后台更新时，第二个文件用于处理回调。

除了这两个文件外，还有文件public/oidc-settings.js。该文件包含一个JSON变量，用于定义OAuth服务器的设置。它使用设置和访问它们的方法定义一个JSON变量：

const settings = {
  authority: 'http://localhost:8180/auth/realms/auth-example',
  client_id: 'webclient-service',
  redirect_uri: 'http://localhost:8080/callback',
  response_type: 'code',
  response_mode: 'query',
  scope: 'openid profile',
  post_logout_redirect_uri: 'http://localhost:8080/logout',
  silent_redirect_uri: 'http://localhost:8080/silent-renewal.html',
  automaticSilentRenew: true,
  filterProtocolClaims: true,
  loadUserInfo: true
}

function getSettings () {
  return settings
}

在silent-renewal.html文件中，我通过使用script标签（<script src='oidc-settings.js'></script导入设置来访问这些设置。

问题是我不知道如何从我的oidc-settings.js访问auth.js。目前，我在auth.js文件中再次定义了完全相同的设置。

如何将放置在应用程序public文件夹中的Javascript文件导入src文件夹中的Javascript文件？

Answer 1

如果您询问如何导航到另一个文件夹，则可以使用../向上浏览一个文件夹。

它看起来像这样：'../public/your-file.js'

如果您需要向上浏览两个（或多个），只需为每个级别添加另一个../，例如'../../folder/file.js'

Answer 2

您正在尝试导入未设置为导入的内容，可能您的路径正确，但是您需要使返回配置的函数可访问。

只需更改设置文件，就可以导入函数getSetting

export const getSettings = () => {
  return settings
}

然后只在您的“ src”文件中

 import { getSettings } from '../public/../../'

将放在/ public中的JS文件导入到/ src中的JS文件中

2 个答案: