Nuxt

nuxt-auth є прикладом інтеграції casdoor у проект nuxt. Ми проведемо вас через наступні кроки. Багато кроків схожі на nextjs-auth.

Крок 1: Розгортання Casdoor

Спочатку Casdoor потрібно розгорнути.

Ви можете звернутися до офіційної документації Casdoor для Встановлення сервера. Будь ласка, розгорніть ваш екземпляр Casdoor у режимі виробництва.

Після успішного розгортання, переконайтеся в наступному:

• Відкрийте ваш улюблений браузер і відвідайте http://localhost:8000. Ви побачите сторінку входу Casdoor.
• Перевірте функціонал входу, ввівши admin як ім'я користувача та 123 як пароль.

Після цього ви можете швидко реалізувати сторінку входу на базі Casdoor у вашому власному додатку, використовуючи наступні кроки.

Крок 2: Додавання Middleware

Middleware дозволяє вам виконувати код перед завершенням запиту. Тоді, на основі вхідного запиту, ви можете змінити відповідь шляхом переписування, перенаправлення, зміни заголовків запиту або відповіді, або безпосередньо відповісти.

Створіть .js або .ts файли у директорії middleware у корені вашого проекту для визначення Middleware. І імена файлів ідентифікуються як назви middleware. Наприклад, у nuxt-auth, ми створюємо файл під назвою myMiddleware.js у директорії middleware, який можна використовувати як myMiddleware в інших місцях, наприклад у nuxt.config.js.

Приклад

//define which paths Middleware will run on
const protectedRoutes = ["/profile"];

export default function ({route, redirect}) {

  if (protectedRoutes.includes(route.path)) {
    //redirect the incoming request to a different URL
    redirect('/login');
  }
}

Щоб middleware працював, ви повинні додати маршрутизатор у nuxt.config.js, як от:

export default {
    // other configuations

    // what to add
    router: {
    middleware: ['myMiddleware'] // replace to your middleware name
  },
}

Дивіться офіційну документацію nuxt middleware для отримання додаткової інформації.

Крок 3: Використання Casdoor SDK

1.Встановлення SDK

Спочатку встановіть casdoor-js-sdk через NPM або Yarn:

npm install casdoor-js-sdk

Або:

yarn add casdoor-js-sdk

2.Ініціалізація SDK

Потім ініціалізуйте 6 рядкових параметрів у наступному порядку:

Назва	Обов'язково	Опис
serverUrl	Так	URL сервера Casdoor, наприклад 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",
};

обережно

Замініть значення конфігурації на ваші власні, особливо 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) {
      //Get Token
      return CasdoorSDK.getUserInfo(res.access_token);
    }
  })
  .then((res) => {
    // Storage Token
    Cookies.set("casdoorUser", JSON.stringify(res));
  });

Ви можете звернутися до офіційної документації Casdoor для Як використовувати Casdoor SDK.

Крок 4: Додавання функції аутентифікації Middleware

коли користувачі намагаються отримати доступ до захищеного маршруту, функція аутентифікації Middleware перевіряє їхню особу. Якщо користувач не аутентифікований, його перенаправляють на сторінку входу або відмовляють у доступі.

Приклад

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