Pular para o conteúdo principal

Nuxt

nuxt-auth é um exemplo de como integrar o casdoor em um projeto nuxt. Vamos guiá-lo através dos passos a seguir. Muitos passos são semelhantes ao nextjs-auth.

Passo 1: Implementar o Casdoor​

Primeiramente, o Casdoor deve ser implementado.

Você pode consultar a documentação oficial do Casdoor para a Instalação do Servidor. Por favor, implemente sua instância do Casdoor em modo de produção.

Após uma implementação bem-sucedida, certifique-se do seguinte:

  • Abra seu navegador favorito e visite http://localhost:8000. Você verá a página de login do Casdoor.
  • Teste a funcionalidade de login inserindo admin como nome de usuário e 123 como senha.

Depois disso, você pode implementar rapidamente uma página de login baseada no Casdoor em seu próprio aplicativo seguindo os passos abaixo.

Passo 2: Adicionar Middleware​

Middleware permite que você execute código antes que uma solicitação seja completada. Então, com base na solicitação recebida, você pode modificar a resposta reescrevendo, redirecionando, modificando os cabeçalhos da solicitação ou resposta, ou respondendo diretamente.

Crie arquivos .js ou .ts no diretório middleware na raiz do seu projeto para definir Middleware. E os nomes dos arquivos são identificados como os nomes do middleware. Por exemplo, em nuxt-auth, criamos um arquivo chamado myMiddleware.js no diretório middleware, que pode ser referenciado como myMiddleware em outros lugares como nuxt.config.js.

Exemplo​

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

Para fazer o middleware funcionar, você deve adicionar o roteador em nuxt.config.js, assim:

export default {
    // other configuations

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

Veja a documentação oficial do nuxt middleware para mais detalhes.

Passo 3: Usar o SDK do Casdoor​

1.Instalar o SDK​

Primeiro, instale casdoor-js-sdk via NPM ou Yarn:

npm install casdoor-js-sdk

Ou:

yarn add casdoor-js-sdk

2.Inicializando o SDK​

Em seguida, inicialize 6 parâmetros do tipo string na seguinte ordem:

NomeObrigatórioDescrição
serverUrlSimURL do Servidor Casdoor, como http://localhost:8000
clientIdSimID do cliente da aplicação
clientSecretSimSegredo do cliente da aplicação
organizationNameSimOrganização da aplicação
appNameSimNome da aplicação
redirectPathSimURL redirecionada

Exemplo​

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

Substitua os valores de configuração pelos da sua própria instância do Casdoor, especialmente o clientId, clientSecret e serverUrl.

3.Redirecionar para a Página de Login​

Quando você precisar autenticar usuários que acessam seu aplicativo, você pode enviar a URL alvo e redirecionar para a página de login fornecida pelo Casdoor.

Certifique-se de ter adicionado a URL de retorno (por exemplo, http://localhost:8080/callback) na configuração do aplicativo antecipadamente.

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

4.Obter Token e Armazenamento​

Após a verificação do Casdoor ser aprovada, ele redirecionará de volta para o seu aplicativo com o token.

Você pode optar por usar cookie para armazenar o 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));
  });

Você pode consultar a documentação oficial do Casdoor para Como usar o SDK do Casdoor.

Passo 4: Adicionar Função de Autenticação Middleware​

quando os usuários tentam acessar uma rota protegida, a função de Autenticação Middleware verifica a identidade deles. Se o usuário não estiver autenticado, ele é redirecionado para uma página de login ou o acesso é negado.

Exemplo​

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