Passer au contenu principal

Nuxt

nuxt-auth est un exemple d'intégration de casdoor dans un projet nuxt. Nous allons vous guider à travers les étapes ci-dessous. De nombreuses étapes sont similaires à nextjs-auth.

Étape 1 : Déployer Casdoor​

Tout d'abord, Casdoor doit être déployé.

Vous pouvez vous référer à la documentation officielle de Casdoor pour l'Installation du Serveur. Veuillez déployer votre instance Casdoor en mode production.

Après un déploiement réussi, assurez-vous de ce qui suit :

  • Ouvrez votre navigateur préféré et visitez http://localhost:8000. Vous verrez la page de connexion de Casdoor.
  • Testez la fonctionnalité de connexion en entrant admin comme nom d'utilisateur et 123 comme mot de passe.

Après cela, vous pouvez rapidement mettre en œuvre une page de connexion basée sur Casdoor dans votre propre application en suivant les étapes ci-dessous.

Étape 2 : Ajouter un Middleware​

Le Middleware vous permet d'exécuter du code avant qu'une requête ne soit complétée. Ensuite, en fonction de la requête entrante, vous pouvez modifier la réponse en réécrivant, redirigeant, modifiant les en-têtes de la requête ou de la réponse, ou en répondant directement.

Créez des fichiers .js ou .ts dans le répertoire middleware à la racine de votre projet pour définir le Middleware. Et les noms de fichiers sont identifiés comme les noms des middleware. Par exemple, dans nuxt-auth, nous créons un fichier nommé myMiddleware.js dans le répertoire middleware, qui peut être référencé comme myMiddleware dans d'autres endroits comme nuxt.config.js.

Exemple​

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

Pour que le middleware fonctionne, vous devez ajouter un routeur dans nuxt.config.js, comme cela :

export default {
    // other configuations

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

Voir la documentation officielle de nuxt middleware pour plus de détails.

Étape 3 : Utiliser le SDK Casdoor​

1.Installer le SDK​

Tout d'abord, installez casdoor-js-sdk via NPM ou Yarn :

npm install casdoor-js-sdk

Ou :

yarn add casdoor-js-sdk

2.Initialiser le SDK​

Ensuite, initialisez 6 paramètres de type chaîne de caractères dans l'ordre suivant :

NomRequisDescription
serverUrlOuiURL du serveur Casdoor, comme http://localhost:8000
clientIdOuiID client de l'application
clientSecretOuiSecret client de l'application
organizationNameOuiOrganisation de l'application
appNameOuiNom de l'application
redirectPathOuiURL de redirection

Exemple​

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

Remplacez les valeurs de configuration par celles de votre propre instance Casdoor, en particulier le clientId, le clientSecret et le serverUrl.

3.Rediriger vers la Page de Connexion​

Lorsque vous devez authentifier les utilisateurs qui accèdent à votre application, vous pouvez envoyer l'URL cible et rediriger vers la page de connexion fournie par Casdoor.

Assurez-vous d'avoir ajouté l'URL de rappel (par exemple http://localhost:8080/callback) dans la configuration de l'application au préalable.

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

4.Obtenir le Token et le Stockage​

Après que la vérification Casdoor soit passée, elle redirigera vers votre application avec le token.

Vous pouvez choisir d'utiliser un cookie pour stocker le token.

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

Vous pouvez vous référer à la documentation officielle de Casdoor pour Comment utiliser le SDK Casdoor.

Étape 4 : Ajouter une Fonction d'Authentification Middleware​

lorsque les utilisateurs tentent d'accéder à une route protégée, la fonction d'authentification Middleware vérifie leur identité. Si l'utilisateur n'est pas authentifié, il est redirigé vers une page de connexion ou l'accès lui est refusé.

Exemple​

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