如何使用 nuxt3 实现 auth0

Question

我正在尝试将 auth0 添加到我的 nuxt3 应用程序中，但我在如何处理它时遇到了困难。auth-nuxt 模块仍然不适用于 nuxt3，并且 auth0-spa-js 无法使其与 SSR 一起使用，我遵循了本教程。

import createAuth0Client from "@auth0/auth0-spa-js";

let auth = await createAuth0Client({
  domain: "dev-......com",
  client_id: "Z0...................0T6I",
  redirect_uri: '<MY_CALLBACK_URL>'
});

export default auth;

import auth from "../store/authfile";
export default defineNuxtRouteMiddleware(async (to, from) => {
    let isAuthenticated = await auth.isAuthenticated();
    if (to.path === "/" && !to?.query?.code) {
        return;
    }
    if (!isAuthenticated) {
        const query = to?.query;
        if (query && query.code && query.state) {
            await auth.handleRedirectCallback();
        } else {
            await auth.loginWithRedirect();
        }
    } else {
        console.log("logged in ", to.path);
    }
    const router = useRouter();
    if (to.path === "/") {
        to.fullPath = "/";
    }
    navigateTo(to.path);
});

500 文档未定义

在 getAll (C:\Users\vesel\Desktop\nuxt-app\node_modules\es-cookie\src\es-cookie.js:68:18) 在 Object.get (C:\Users\vesel\Desktop\nuxt- app\node_modules\es-cookie\src\es-cookie.js:72:12) 在 Object.get (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\ lib\auth0-spa-js.cjs.js:4550:40) 在 Object.get (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0- spa-js.cjs.js:4585:35) 在 Auth0Client。(C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:5258:45) 在步骤 (C:\Users\ vesel\Desktop\nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:186:23) 在 Object.next (C:\Users\vesel\Desktop\ nuxt-app\node_modules@auth0\auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:130:20) 位于 C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\ auth0-spa-js\dist\lib\auth0-spa-js.cjs.js:107:71 at new Promise () at __awaiter (C:\Users\vesel\Desktop\nuxt-app\node_modules@auth0\auth0- spa-js\dist\lib\auth0-spa-js.cjs.js:89:12)`

Answer 1

Auth0 有一个Vue3 包，可以配置为 Nuxt3 插件。

首先，仅遵循快速入门中概述的配置步骤和安装步骤。

接下来，将其添加为 Nuxt3 插件，使用以下代码在 Plugin 文件夹中创建一个名为 auth.ts 的新文件。在这里，我们将 auth0 实例化为插件，并添加一个“auth”中间件来重新路由经过身份验证的页面。请记住使用DefinePageMeta将中间件添加到需要它们的页面：

import { createAuth0 } from '@auth0/auth0-vue'

export default defineNuxtPlugin((nuxtApp) => {
  const auth0 = createAuth0({
    domain: 'xxxx.auth0.com',
    client_id: 'xxx',
    redirect_uri: 'http://localhost:3000',
  })

  if (process.client) {
    nuxtApp.vueApp.use(auth0)
  }

  addRouteMiddleware('auth', () => {
    if (process.client) {
      auth0.checkSession()
      if (!auth0.isAuthenticated.value) {
        auth0.loginWithRedirect({
          appState: {
            target: useRoute().path,
          },
        })
      }
    }
  })
})

现在我们可以创建一个引用此插件的登录按钮 Vue 组件（Login.vue）。请注意，“登录”按钮只能在客户端上执行 auth0 功能，因此我们的默认设置是“登录”，并且会在 isAuthenticated 数据更新时刷新。

<template>
  <div>
    <a
      v-if="!isAuthenticated"
      @click="login"
    >
      <slot>Log In</slot>
    </a>
    <a
      v-else
      @click="logout"
    >
      <slot>Log Out</slot>
    </a>
  </div>
</template>

<script lang="ts" setup>
import { useAuth0 } from '@auth0/auth0-vue'

// Composition API
const auth0 = process.client ? useAuth0() : undefined

const isAuthenticated = computed(() => {
  return auth0?.isAuthenticated.value
})

const login = () => {
  auth0?.checkSession()
  if (!auth0?.isAuthenticated.value) {
    auth0?.loginWithRedirect({
      appState: {
        target: useRoute().path,
      },
    })
  }
}

const logout = () => {
  navigateTo('/')
  auth0?.logout()
}
</script>

该包的更多功能可以在Github Repo中找到。

旁注：该中间件仅在客户端运行，因此您应该断言默认情况下所有页面都不会返回敏感信息。Auth0在这里描述了NextJS无服务器架构身份验证。