Question

我对 Nuxt 非常陌生，我正在开发一个在后端使用 Django 的 SSR 应用程序。

我正在尝试创建登录页面，在渲染它之前，我想检查用户是否已经登录，以及是否将用户重定向到另一个页面。

由于各种原因，我无法从 Nuxt 中间件执行此操作，因为我需要从客户端而不是服务器端执行此代码，因此我决定使用 beforeRouteEnter。我的代码似乎可以工作，但问题是它会加载页面，然后在或多或少 1-2 秒后重定向到另一个页面。这有点难看，因为我不希望用户在被重定向之前看到登录页面。我对 beforeCreate 进行了同样的尝试，但结果是一样的

为什么会这样？是因为页面被缓存了吗？能修吗？

代码如下：

export default {
  name: 'LoginPage',

  props: {
  },

  data(){
    return {
    }
  },

  beforeRouteEnter (to, from, next) {
    return axios({
      method: 'post',
      url: 'http://127.0.0.1:8000/checkAuth',
      data: {
      },
      withCredentials: true,
      headers: {}
    }).then(function (response) {
      if (response['data']['state'] == 'True'){
        //user is logged in, redirect
        next('/')
      } else {
        //user is not logged in, don't redirect
        next()
      }
      
    }).catch(function (error) {
      next()
    });

  }
 ...
}

Answer 1

试着用这种形式写

beforeRouteEnter(to, from, next) {
  next(async (vm) => {
    await axios...

    if(...) {
      next()
    } else {
      next(false) // in case the navigation needs to be blocked
    }
  })
}

这样，它应该在解析导航之前等待结果。

如果您只需要在 pages 上进行此检查，您还可以使用 https://docs.microsoft.com/en-us/azure/api-management/api-management-cross-domain-policies 在导航到下一页之前获取数据（它会阻塞直到解决）。请注意，因为目标页面上的 F5 不会触发此挂钩。

Nuxt/Vue - 为什么在 beforeRouteEnter 执行之前加载页面？

1 个答案: