首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >vue nuxt TypeError:无法读取未定义的属性(读取“挂载”)

vue nuxt TypeError:无法读取未定义的属性(读取“挂载”)
EN

Stack Overflow用户
提问于 2022-05-26 13:04:37
回答 2查看 2.8K关注 0票数 1

我试着用这个https://tliebrand.com/19-programming/26-how-to-authorize-nuxt-against-keycloak来使用keycloak + vue nuxt

当我尝试登录时,由于以下错误,它失败了:

代码语言:javascript
运行
复制
TypeError: Cannot read properties of undefined (reading 'mounted')
    at Auth.mounted (webpack-internal:///./.nuxt/auth/auth.js:221:26)
    at Auth.setStrategy (webpack-internal:///./.nuxt/auth/auth.js:213:19)
    at Auth.loginWith (webpack-internal:///./.nuxt/auth/auth.js:242:19)
    at _callee$ (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=js&:52:36)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:294:22)
    at Generator.eval [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:119:21)
    at asyncGeneratorStep (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:5:24)
    at _next (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:27:9)
    at eval (webpack-internal:///./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:34:7) {stack: 'TypeError: Cannot read properties of undefine…runtime/helpers/esm/asyncToGenerator.js:34:7)', message: 'Cannot read properties of undefined (reading 'mounted')'}

下面是package.json的内容:

代码语言:javascript
运行
复制
{
  "name": "front",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/auth-next": "^5.0.0-1648802546.c9880dc",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/i18n": "^7.2.2",
    "@nuxtjs/proxy": "^2.1.0",
    "@nuxtjs/pwa": "^3.3.5",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.19.3",
    "nuxt": "^2.13.3",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.16.3",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^8.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/vuetify": "^1.12.3",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.4.4",
    "eslint": "^8.4.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^3.1.0",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^27.4.4",
    "prettier": "^2.5.1",
    "ts-jest": "^27.1.1",
    "vue-jest": "^3.0.4",
    "webpack": "^4.46.0"
  }
}

nuxt.config.js模块部分的内容:

代码语言:javascript
运行
复制
// Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    // https://go.nuxtjs.dev/content
    '@nuxt/content',    
    '@nuxtjs/auth',
    //'@nuxtjs/auth-next',
    '@nuxtjs/vuetify',
    '@nuxtjs/proxy',
  ],

nuxt.config.js第四部分的内容:

代码语言:javascript
运行
复制
auth: {
    strategies: {
      local: false,
      keycloak: {
        scheme: 'oauth2',
        endpoints: {
          configuration: 'https://keycloak.example.com/realms/master/.well-known/openid-configuration',
          authorization: 'https://keycloak.example.com/realms/master/protocol/openid-connect/auth',
          token: 'https://keycloak.example.com/realms/master/protocol/openid-connect/token',
          userInfo: 'https://keycloak.example.com/realms/master/protocol/openid-connect/userinfo',
          logout: 'https://keycloak.example.com/realms/master/protocol/openid-connect/logout?redirect_uri=' + encodeURIComponent('http://localhost:3000')
        },
        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: 'nuxttest',
          scope: ['openid', 'profile', 'email'],
          codeChallengeMethod: 'S256'
        }
      },
    redirect: {
      login: '/login',
      logout: '/',
      home: '/'
    }
  }

问题是如何解决这个问题。谢谢。

EN

回答 2

Stack Overflow用户

发布于 2022-05-26 13:33:59

回答我自己。它只是要求使用auth-next而不是auth。

@nuxtjs/auth-next‘,

票数 1
EN

Stack Overflow用户

发布于 2022-09-05 08:34:04

在方案中添加前面的下划线;为_scheme

i.e

代码语言:javascript
运行
复制
strategies: {
   keycloak: {
        _scheme: 'oauth2',
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72392293

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档