带密钥斗篷的 Nuxt 身份验证：ssr this.$auth.loggedIn 在页面加载时始终为 false

Question

我有一个使用 nuxt 和 keycloak 作为身份验证策略的设置，通常可以正常工作。我可以通过 keycloak 登录，然后页面上会有 this.$auth.loggedIn === true。通过 vue-router 导航时，切换到新页面时 this.$auth.loggedIn 也将为真。

但是当我重新加载页面 (CMD+r/F5) 时，服务器端呈现 false this.$auth.loggedIn，而在客户端呈现 true .这迫使我在模板中做很多 <client-only> 块以防止 ssr 不匹配。

我想知道是否有可能在第一个页面加载服务器端渲染 return 一个具有授权内容的页面？我认为这应该是可能的，因为带有身份验证信息的 cookie 已设置并发送到服务器。或者永远不可能和高效的服务器端渲染只能用于非授权内容？

版本：

nuxt: 2.15.8
@nuxtjs/auth-next: 5.0.0-1643791578.532b3d6

nuxt.config.js:

auth: {
  strategies: {
    keycloak: {
      scheme: 'oauth2',
      endpoints: {
        authorization: `${ process.env.KEYCLOAK }/protocol/openid-connect/auth`,
        userInfo: `${ process.env.KEYCLOAK }/protocol/openid-connect/userinfo`,
        token: `${ process.env.KEYCLOAK }/protocol/openid-connect/token`,
        logout: `${ process.env.KEYCLOAK }/protocol/openid-connect/logout`,
      },
      token: {
        property: 'access_token',
        type: 'Bearer',
        maxAge: 1800,
      },
      refreshToken: {
        property: 'refresh_token',
        maxAge: 60 * 60 * 24 * 30,
      },
      responseType: 'code',
      grantType: 'authorization_code',
      clientId: process.env.CLIENT_ID,
      scope: ['openid', 'profile', 'email', 'roles'],
      codeChallengeMethod: 'S256',
      redirect: {
        logout: '/',
        callback: '/',
        home: '/',
      },
    },
  },
},

有一个 Vue 组件：

created() {
  console.log(this.$auth.loggedIn);
},

登录后将 return false 用于 SSR，true 在客户端 load/refresh 页。

Answer 1

手动实施服务器端验证器后，我发现问题出在我的本地 docker 设置上。

之前没想到是这个问题，所以忘记提了。我有一个带有 keycloak 的本地 docker 容器和一个带有 nuxt 的本地 docker 容器。

长话短说，似乎 nuxt 服务器无法与 keycloak 通信，因此无法获取用户。在更改了一些地址后，keycloak 在浏览器和我的 nuxt 服务器 docker 容器中的相同地址上可用，nuxt 服务器确实在页面加载时自动获得 $auth.loggedIn=true 如果是已登录。

不确定我是否没有看到它，但我希望如果 nuxt 服务器无法与授权服务器通信，nuxt auth 会给我一个错误。会节省我很多调试时间。

带密钥斗篷的 Nuxt 身份验证：ssr this.$auth.loggedIn 在页面加载时始终为 false

Nuxt auth with keycloak: ssr this.$auth.loggedIn always false on page load

authentication

keycloak

server-side-rendering

nuxt.js