当浏览器 window 刷新时，带有 keycloak js 身份验证中间件的 nuxt js 页面重新加载两次？nuxtjs 路由器不等到承诺解决

Question

我在 nuxt js 中间件中使用 keycloak 进行身份验证，代码如下：

import Keycloak from 'keycloak-js'

const keycloak = new Keycloak({
  url: 'http://localhost:8080/auth',
  realm: 'dev-employee',
  clientId: 'emp-ui'
})

export default function({ store, redirect }) {
  if (keycloak.authenticated) return true

  return keycloak
    .init({
      onLoad: 'login-required',
      checkLoginIframe: true,
      checkLoginIframeInterval: 5
    })
    .success(authenticated => {})
    .error(function() {
      alert('failed to initialize')
    })
}

nuxt.config.js

 router: {
    middleware: ['authentication']
  },

当浏览器 window 加载页面时，将呈现并验证并再次重新加载页面。在 keycloak 身份验证成功之前，预期的行为页面不应呈现。

Answer 1

你必须 return 在中间件中创建一个新的 Promise，像这样：

export default function({ store, redirect }) {
  if (keycloak.authenticated) return true

  return new Promise((resolve, reject) => {
    keycloak
      .init({
        onLoad: 'login-required',
        checkLoginIframe: true,
        checkLoginIframeInterval: 5
      })
      .success(resolve)
      .error(reject)
  })
}

当浏览器 window 刷新时，带有 keycloak js 身份验证中间件的 nuxt js 页面重新加载两次？nuxtjs 路由器不等到承诺解决

nuxt js page with keycloak js authentication middleware reloaded twice when browser window refreshed?nuxtjs router not waiting until promises resolves

javascript

vue.js

keycloak

vue-router

nuxt.js