Nuxt

nuxt-auth是一个如何在nuxt项目中集成casdoor的示例。我们将引导您完成以下步骤。许多步骤与nextjs-auth相似。

步骤1：部署Casdoor

首先，应部署Casdoor。

您可以参考Casdoor官方文档中的服务器安装。请以生产模式部署您的Casdoor实例。

成功部署后，请确保以下内容：

打开您喜欢的浏览器并访问**http://localhost:8000**。您将看到Casdoor的登录页面。
通过输入admin作为用户名和123作为密码来测试登录功能。

之后，您可以使用以下步骤在您自己的应用中快速实现基于Casdoor的登录页面。

步骤2：添加中间件

中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应头，或直接响应来修改响应。

在项目根目录的middleware目录中创建.js或.ts文件来定义中间件。并且文件名被识别为中间件的名称。例如，在nuxt-auth中，我们在middleware目录中创建了一个名为myMiddleware.js的文件，可以在nuxt.config.js等其他地方引用为myMiddleware。

示例

//定义中间件将在哪些路径上运行
const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {

  if (protectedRoutes.includes(route.path)) {
    //将传入的请求重定向到不同的URL
    redirect('/login');
  }
}

要使中间件工作，您应该在nuxt.config.js中添加路由，如下所示：

export default {
    // 其他配置

    // 需要添加的内容
    router: {
    middleware: ['myMiddleware'] // 替换为你的中间件名称
  },
}

查看nuxt官方文档middleware以获取更多详细信息。

步骤3：使用Casdoor SDK

1.安装SDK

首先，通过NPM或Yarn安装casdoor-js-sdk：

npm install casdoor-js-sdk

或者：

yarn add casdoor-js-sdk

2.初始化SDK

然后按以下顺序初始化6个字符串类型的参数：

名称	必需	描述
serverUrl	是	Casdoor服务器URL，例如`http://localhost:8000`
clientId	是	应用客户端ID
clientSecret	是	应用客户端密钥
organizationName	是	应用组织
appName	是	应用名称
redirectPath	是	重定向URL

示例

const sdkConfig = {
  serverUrl: "https://door.casdoor.com",
  clientId: "294b09fbc17f95daf2fe",
  clientSecret: "dd8982f7046ccba1bbd7851d5c1ece4e52bf039d",
  organizationName: "casbin",
  appName: "app-vue-python-example",
  redirectPath: "/callback",
};

注意事项

将配置值替换为您自己的Casdoor实例，特别是clientId、clientSecret和serverUrl。

3.重定向到登录页面

当您需要验证访问您的应用的用户时，您可以发送目标URL并重定向到Casdoor提供的登录页面。

确保您已经在应用配置中提前添加了回调URL（例如**http://localhost:8080/callback**）。

const CasdoorSDK = new Sdk(sdkConfig);
CasdoorSDK.signin_redirect();

4.获取令牌和存储

Casdoor验证通过后，它将带着令牌重定向回您的应用。

您可以选择使用cookie来存储令牌。

CasdoorSDK.exchangeForAccessToken()
  .then((res) => {
    if (res && res.access_token) {
      //获取令牌
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    // 存储令牌
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

您可以参考Casdoor官方文档中的如何使用Casdoor SDK。

步骤4：添加中间件认证功能

当用户试图访问受保护的路由时，中间件认证功能会验证他们的身份。如果用户未经认证，他们将被重定向到登录页面或被拒绝访问。

示例

import Cookies from "js-cookie";

const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {
  const casdoorUserCookie = Cookies.get('casdoorUser');
  const isAuthenticated = !!casdoorUserCookie;

  if (!isAuthenticated && protectedRoutes.includes(route.path)) {
    redirect('/login');
  }
}

步骤1：部署Casdoor​

步骤2：添加中间件​

示例​

步骤3：使用Casdoor SDK​

1.安装SDK​

2.初始化SDK​

示例​

3.重定向到登录页面​

4.获取令牌和存储​

步骤4：添加中间件认证功能​

示例​