如何使用 Auth0 配置 @nuxtjs/auth

Question

我创建了一个使用 Auth0 作为登录提供程序的 Nuxt 应用程序。当你登录时，你会被重定向到回调页面，然后 auth 模块接管并将登录信息保存在状态中。一切都在开发模式下完美运行，但是一旦我为生产生成代码，auth 模块就不再对回调做出反应并且您没有登录。在目标服务器或静态中生成无效。我设置为模式=通用。我尝试启用 SSR 或专门禁用它，但没有效果。我正在使用

"nuxt": "^2.15.4"

"@nuxtjs/auth": "^4.9.1",

我和这件事纠缠了一个星期，看到很多帖子都在讨论这个问题，但是没有人提供解决方案。这真的是Nuxt没有处理的问题吗？如果平台无法处理生产中的身份验证，那几乎会扼杀该平台的实用性...... 有没有人有办法解决这个问题？

我愿意 post 我的代码，如果它能帮助解决这个问题。

编辑：这是我的 nuxt.config.js 文件：

export default {
    mode: 'universal',
    target: 'server',
    css: [],
    plugins: [
        { src: '~/plugins/vue-debounce.js' },
        { src: '~/plugins/modal-popup.js', ssr: false },
        { src: '~/plugins/editor.js', ssr: false },
    ],
    components: true,
    buildModules: ['@nuxtjs/eslint-module', '@nuxtjs/fontawesome'],
    fontawesome: {
        component: 'fa',
        suffix: true,
        icons: {
            solid: ['faCaretDown', 'faCaretRight', 'faCaretLeft'],
            regular: ['faFileAlt'],
        },
    },
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/auth',
    ],
    axios: {
        baseURL: 'http://localhost:9000/api/',
        headers: {
            common: {
                Accept: 'application/json',
            },
        },
    },
    auth: {
        strategies: {
            auth0: {
                domain: '<my domain>.eu.auth0.com',
                client_id: '<client id>',
                audience: 'https://<my domain>.eu.auth0.com/api/v2/',
            },
        },
        redirect: {
            callback: '/callback/',
            logoutRedirectUri: '/login'
        },
    },
    build: {
        transpile: [],
    },
}

Answer 1

这是我创建的一个 repo，它深入解释了如何设置最设置的 auth0 连接流程：https://github.com/kissu/so-nuxt-docs-theme-auth-auth0

请注意 README.md，然后检查它如何与您的 auth 设置配合使用。这是我的部分

nuxt.config.js

auth: {
  redirect: {
    callback: "/",
    home: "/",
    login: "/login",
    logout: "/"
  },
  localStorage: false,
  strategies: {
    local: false,
    auth0: {
      domain: process.env.AUTH0_DOMAIN,
      clientId: process.env.AUTH0_CLIENT_ID,
      scope: ['openid', 'profile', 'offline_access'],
      accessType: 'offline',
      responseType: 'code',
      grantType: 'authorization_code',
      codeChallengeMethod: 'S256',
    }
  },
},

至于目标，如果您从一开始就直接限制对应用的访问，最好的方法仍然是

target: 'static',
ssr: false,

这样一来，它就不需要任何 NodeJS 服务器，而只是 SPA。事实上，没有必要生成受保护的页面（通过 auth0），因为这个人需要登录。而且，由于 @nuxt/auth 的工作方式，它不会生成它们。

Answer 2

我发现了问题。我在 Axios 中实现了一个 non-standard header，像这样：

axios: {
    baseURL: 'http://localhost:9000/api/',
    headers: {
        common: {
            Accept: 'application/json',
            authentication: "<UUID code>"
        },
    },
}

我这样做是为了保护与服务器的通信安全，直到我有了 Auth0 运行，但我忘了删除它。

我一摆脱这个 header，它就开始按预期工作了。我不确定为什么这会导致它在开发人员模式下工作而不是在生成的代码中工作，但是删除该行使其在两种模式下都工作。

如何使用 Auth0 配置 @nuxtjs/auth

How to configure @nuxtjs/auth with Auth0

authentication

vue.js

auth0

nuxt.js