[英]Nuxt Auth Module with Auth0 Provider Causing Redirect Loop
I have a SPA built using Nuxt and @nuxtjs/auth that is configured to connect to Auth0 via the built-in Auth0 provider in nuxt-auth. 我有一个使用Nuxt和@ nuxtjs / auth构建的SPA,该SPA配置为通过nuxt-auth中的内置Auth0提供程序连接到Auth0。 The resulting app viewed through webpack's server via
yarn dev
has a redirect loop after login. 登录后,通过
yarn dev
pack通过webpack的服务器查看的结果应用程序具有重定向循环。 Login is successful but the page is then redirected back to the /callback
url to go through the OAuth flow again. 登录成功,但是页面随后被重定向回
/callback
URL,以再次通过OAuth流。
Here is my nuxt.config.js: 这是我的nuxt.config.js:
import colors from 'vuetify/es5/util/colors'
import dotenv from 'dotenv'
// Get env vars
dotenv.config()
export default {
mode: 'spa',
/*
** Plugins to load before mounting the App
*/
plugins: ['~/plugins/axios', '~/plugins/shortkey'],
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/dotenv',
'@nuxtjs/vuetify',
'@nuxtjs/axios',
'@nuxtjs/auth',
'@nuxtjs/eslint-module'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
auth: {
redirect: {
callback: '/callback'
},
strategies: {
auth0: {
domain: `mydomain-${process.env.TENANCY}.auth0.com`,
client_id: 'myClientId',
audience: 'https://my-api.mydomain.com',
scope: [
'openid',
'profile',
'email',
'userinfo',
'user:*',
'user:read:all'
]
}
},
plugins: ['~/plugins/cdnAuth.js']
},
router: {
middleware: ['auth']
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
theme: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
},
server: {
port: 3005
},
env: {
API_KEY: process.env.API_KEY,
CDN_URL: process.env.CDN_URL
}
}
Here is my directory structure: 这是我的目录结构:
├── README.md
├── assets
│ ├── favicon.png
│ ├── logo_black.svg
│ └── style
├── components
│ ├── index.js
├── jest.config.js
├── layouts
│ ├── README.md
│ ├── default.vue
│ ├── dialog.vue
│ └── error.vue
├── middleware
│ └── README.md
├── mixins
│ ├── README.md
│ └── index.js
├── nuxt.config.js
├── package.json
├── pages
│ ├── README.md
│ ├── callback.vue
│ ├── index.vue
│ ├── login.vue
├── plugins
│ ├── README.md
│ ├── axios.js
Figured it out. 弄清楚了。 The issue was caused by putting the initialization call for nuxt inside of the mounted() method of my top navigation.
这个问题是由于将对nuxt的初始化调用放在顶部导航的mount()方法内而引起的。
I changed it to: 我将其更改为:
mounted() {
!this.$auth.loggedIn && this.$auth.loginWith('auth0')
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.