Nuxt

The nuxt-auth repo demonstrates Casdoor integration in Nuxt. The flow is similar to the Next.js example.

ステップ1: Casdoorのデプロイ

Deploy Casdoor in production mode. Confirm the login page works (e.g. at http://localhost:8000 with admin / 123 in dev).

Step 2: Add middleware

Create a .js or .ts file in the middleware directory. The filename becomes the middleware name (e.g. myMiddleware.js → myMiddleware). Reference it in nuxt.config.js.

例：

const protectedRoutes = ["/profile"];

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

Enable in nuxt.config.js:

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

See Nuxt middleware.

ステップ3: Casdoor SDKの使用

Install

npm install casdoor-js-sdk
# or: yarn add casdoor-js-sdk

Initialize

Provide these six string parameters:

パラメータ	必須	説明
serverUrl	はい	Casdoor server URL (e.g. http://localhost:8000).
clientId	はい	アプリケーションクライアントID.
clientSecret	はい	アプリケーションクライアントシークレット.
organizationName	はい	Organization name.
appName	はい	アプリケーション名.
redirectPath	はい	Callback path (e.g. /callback).

例：

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

注意

Replace with your own Casdoor instance: serverUrl, clientId, and clientSecret.

Add the callback URL (e.g. http://localhost:8080/callback) in the application’s Redirect URLs.

Redirect to sign-in and handle callback

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

After sign-in, exchange the code for a token and optionally store the user in a cookie:

CasdoorSDK.exchangeForAccessToken()
  .then((res) => {
    if (res && res.access_token) {
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

See How to use Casdoor SDK.

Step 4: Protect routes in middleware

Check the Casdoor user cookie and redirect unauthenticated users from protected routes:

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