Nuxt

nuxt-auth является примером интеграции casdoor в проект nuxt. Мы проведем вас через следующие шаги. Многие шаги похожи на nextjs-auth.

Шаг 1: Развертывание Casdoor

Во-первых, необходимо развернуть Casdoor.

Вы можете обратиться к официальной документации Casdoor для Установки сервера. Пожалуйста, разверните ваш экземпляр Casdoor в продакшн-режиме.

После успешного развертывания убедитесь в следующем:

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

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

Шаг 2: Добавление промежуточного ПО (Middleware)

Промежуточное ПО позволяет вам выполнять код до завершения запроса. Затем, исходя из входящего запроса, вы можете изменить ответ, переписав, перенаправив, изменив заголовки запроса или ответа, или непосредственно ответив.

Создайте файлы .js или .ts в директории 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');
  }
}

Чтобы промежуточное ПО работало, вы должны добавить маршрутизатор в nuxt.config.js, например так:

export default {
    // other configuations

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

Смотрите официальную документацию nuxt middleware для получения дополнительной информации.

Шаг 3: Использование SDK Casdoor

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	Да	Идентификатор клиента приложения
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 для Как использовать SDK Casdoor.

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