Nuxt

nuxt-auth 仓库展示了在 Nuxt 中集成 Casdoor 的方法。流程与 Next.js 示例类似。

步骤1：部署Casdoor

在生产模式。确认登录页面正常工作（例如，在开发环境中访问http://localhost:8000，使用用户名admin和密码123）。

步骤2：添加中间件

在middleware目录中创建一个.js或.ts文件。文件名即为中间件名称（例如：myMiddleware.js → myMiddleware）。在 nuxt.config.js 中引用它。

示例：

const protectedRoutes = ["/profile"];

export default function ({ route, redirect }) {
  if (protectedRoutes.includes(route.path)) {
    redirect('/login');
  }
}

在 nuxt.config.js 中启用：

export default {
  router: {
    middleware: ['myMiddleware']  // your middleware name
  },
}

请参阅【Nuxt 中间件】(https://nuxt.com/docs/guide/directory-structure/middleware)。

步骤3：使用Casdoor SDK

安装

npm install casdoor-js-sdk
# or: yarn add casdoor-js-sdk
npm install casdoor-js-sdk # 或：y

初始化

提供以下六个字符串参数：

参数	必需	描述
serverUrl	是	Casdoor服务器URL（例如http://localhost:8000）。
clientId	是	应用程序客户端 ID。
clientSecret	是	应用程序客户端密钥。
organizationName	是	组织名称。
appName	是	应用名称。
重定向路径	是	回调路径（例如：/callback）。

示例：

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

注意事项

请用您自己的Casdoor实例替换：serverUrl、clientId 和 clientSecret。

<b请在应用程序的重定向 URL 中添加回调 URL（例如 http://localhost:8080/callback）。

重定向至登录并处理回调

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

登录后，用代码兑换令牌，并可选择将用户存储在 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 SDK。

第4步：在中间件中保护路由

检查Casdoor用户Cookie，并将未通过身份验证的用户重定向至受保护的路由：

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');
  }
}