Auth0 路由保护不能与 Nuxt 中间件一起工作

Question

在 Nuxt 中实现 Auth0 路由保护的正确模式是什么？

我调整了 Auth0 sample code 以创建以下中间件：

import {getInstance} from '~/plugins/auth';

export default function () {
  const authService = getInstance();

  const fn = () => {
    // If the user is authenticated, continue with the route
    if (!authService.isAuthenticated) {
      authService.loginWithRedirect({
        appState: {targetUrl: 'http://localhost:3000'},
      });
    }
  };

  // If loading has already finished, check our auth state using `fn()`
  if (!authService.loading) {
    return fn();
  }

  // Watch for the loading property to change before we check isAuthenticated
  authService.$watch('loading', loading => {
    if (loading === false) {
      return fn();
    }
  });
}

注意，在访问Auth0的认证状态之前，我们必须等待实例加载完成。 Auth0 示例代码使用 $watch.

执行此操作

我的中间件代码“有效”，但存在在异步 $watch 触发之前短暂显示受保护页面的问题。有什么方法可以等待并阻止路由继续渲染，直到 Auth0 完成加载并且可以访问其身份验证状态？

我也试过在 Nuxt 页面的 beforeRouteEnter 挂钩中使用 Auth0 提供的几乎完全相同的代码，但没有我自己的修改。这有同样的问题，这回避了为什么 Auth0 示例可能在 VueJS 中使用 beforeRouteEnter 但在 Nuxt 中不起作用的问题？

Answer 1

解决了！

A middleware can be asynchronous. To do this return a Promise or use async/await.

https://nuxtjs.org/docs/2.x/directory-structure/middleware/

我只是将我的中间件脚本包装在一个承诺中。如果用户能够通过，我就解决了，否则我将他们重定向到 Auth0 登录。

import {getInstance} from '~/plugins/auth';

export default function () {
  return new Promise(resolve => {
    const authService = getInstance();

    const fn = () => {
      // If the user is authenticated, continue with the route
      if (!authService.isAuthenticated) {
        return authService.loginWithRedirect({
          appState: {targetUrl: 'http://localhost:3000'},
        });
      }
      resolve();
    };

    // If loading has already finished, check our auth state using `fn()`
    if (!authService.loading) {
      return fn();
    }

    // Watch for the loading property to change before we check isAuthenticated
    authService.$watch('loading', loading => {
      if (loading === false) {
        return fn();
      }
    });
  });
}

对于 return loginWithRedirect 确保它不会继续解决 if 块之外的承诺也很重要。

Auth0 路由保护不能与 Nuxt 中间件一起工作

Auth0 route guard not working with Nuxt middleware

vue.js

auth0

vuejs2

nuxt.js