Lidando com autenticação em Vue.js usando Vuex, Vue Router e Auth0

Você também será perguntado se deseja usar o modo Histórico para o Roteador-escolha Sim . Você pode selecionar qualquer Linter que desejar, mas para este tutorial estarei usando ESLint e Prettier.

Após a criação do projeto, navegue até a nova pasta de projeto:

 cd vue-sample-auth0

Em seguida, inicie o servidor:

 npm run servir

Assim que o servidor for iniciado, você pode abrir seu navegador para visualizá-lo. Você deve ver isto:

Configuração do Auth0

Agora instalaremos a biblioteca do Auth0 para lidar com a autenticação em o lado do cliente:

 npm i auth0-js

Para começar com Auth0 , você precisa se inscrever, criar um novo inquilino e selecione sua região. Em seguida, você pode prosseguir por estas etapas:

1. No painel, clique em Aplicativos .
   
2. Clique em Criar aplicativo .
   
3. Este modal deve aparecer e você deve selecionar Aplicativos da web de página única .
   
4. Podemos então selecionar Vue nas opções.
   

Definição das configurações do Auth0

Agora que você criou o aplicativo, é hora de definir as configurações.

Você verá seu domínio e ID de cliente na seção Informações básicas . Voltaremos a isso mais tarde; primeiro, precisamos armazenar esses valores como variáveis ​​ambientais para que nosso aplicativo funcione.

Na seção URLs do aplicativo, precisaremos definir estes valores:

• URLs de retorno de chamada permitidos
• URLs de logout permitidos
• Origens da web permitidas
• Origens permitidas (CORS)

Observe que você precisará usar seu próprio URL local para testar seu aplicativo localmente.

URLs de retorno de chamada permitidos

Esses são os únicos URLs de que você precisa para redirecionar seus usuários depois que eles fizerem login. Usaremos o URL local:

 http://localhost: 8080/authfinalize

Explicarei por que estamos enviando o usuário para a rota authfinalize posteriormente neste artigo.

URLs de logout permitidos

Esses são os URLs que o Auth0 pode usar para redirecionar seus usuários depois que eles se desconectarem.

 http://localhost: 8080

Origens da web permitidas

Estes são os únicos URLs com permissão para enviar solicitações para Auth0. Você precisa adicionar este URL para evitar um erro de compartilhamento de recursos de origem cruzada (CORS). Por enquanto, adicionaremos o URL local:

 http://localhost: 8080

Origens permitidas (CORS)

Esses são os únicos URLs que têm permissão para fazer solicitações ao servidor.

 http://localhost: 8080

Aqui, teremos que definir a expiração de nosso id_token em segundos. Usaremos 36.000s (10 horas) para este site de amostra:

Agora, vamos voltar para a pasta do nosso projeto e criar um arquivo .env para nosso desenvolvimento local. Adicione essas variáveis ​​de ambiente:

 VUE_APP_AUTH0_CONFIG_RESPONSETYPE=token id_token
VUE_APP_AUTH0_CONFIG_SCOPE=e-mail de perfil openid
VUE_APP_AUTH0_CONFIG_DOMAIN={{Domínio}}
VUE_APP_AUTH0_CONFIG_DOMAINURL=https://{{Domain}}
VUE_APP_AUTH0_CONFIG_CLIENTID={{ClientID}}
VUE_APP_DOMAINURL={{URL do host local}}
VUE_APP_DOMAINURL_REDIRECT={{URL de retorno de chamada permitido}}
VUE_APP_EXPIRY=36000

Essas variáveis ​​serão usadas em nosso projeto à medida que prosseguirmos. O token de acesso e o id_token serão retornados como resposta após a autenticação, que pode ser usado para verificar a identidade do usuário autenticado.

Domain , ClientID e URL de retorno de chamada permitido podem ser encontrados na página Configurações . A única diferença entre nosso VUE_APP_AUTH0_CONFIG_DOMAIN e VUE_APP_AUTH0_CONFIG_DOMAINURL é que precisamos adicionar https:// na frente do domínio. Todas as variáveis ​​ambientais no Vue devem ter um prefixo de VUE_APP .

Configurando Vuex

Consideraremos Vuex como a única fonte da verdade para nosso aplicativo e, portanto, será usado para inicializar Auth0 em nosso aplicativo. Também o usaremos para lidar com dados em nosso aplicativo.

Primeiro, precisamos importar auth0-js para nosso aplicativo e configurar nosso estado . Em nosso estado , inicializaremos o Auth0 e adicionaremos os detalhes do nosso aplicativo a partir das variáveis ​​ambientais, conforme discutido acima.

 importar Vuex de"vuex";
importar Vue de"vue";
importar ações de"./auth/actions";
importar getters de"./auth/getters";
importar mutações de"./auth/mutations";
importar auth0 de"auth0-js";
Vue.use (Vuex);
estado const=()=> ({ userIsAuthorized: false, auth0: novo auth0.WebAuth ({ domínio: process.env.VUE_APP_AUTH0_CONFIG_DOMAIN, clientID: process.env.VUE_APP_AUTH0_CONFIG_CLIENTID, redirectUri: process.env.VUE_APP_DOMAINURL_REDIRECT, responseType: process.env.VUE_APP_AUTH0_CONFIG_RESPONSETYPE, escopo: process.env.VUE_APP_AUTH0_CONFIG_SCOPE, }),
});
exportar novo padrão Vuex.Store ({ namespaced: true, Estado, ações, getters, mutações,
});

Adicionamos userIsAuthorized ao nosso estado para aceitar boolean . Vamos usá-lo como um indicador para saber se o usuário está conectado. Observe que no carregamento inicial do aplicativo, isso será registrado como falso.

Ações Vuex

login

Autenticar o usuário com Auth0 envolve enviar o usuário a um portal Auth0 fora de nosso aplicativo. Depois disso, nós os devolvemos ao nosso aplicativo. Esta ação de login será chamada em nosso componente para acionar este redirecionamento.

//login.js login const=({estado})=> { state.auth0.authorize () }
exportar login padrão; 

//logando no componente  
  Login   Inscrição  

authHandleAuthentication

Quando o usuário retorna ao nosso aplicativo, o token de acesso e o id_token são enviados de volta para nós como uma resposta. Esta ação define o tempo de expiração do token e, em seguida, armazena o token de acesso , id_token e o tempo de expiração localmente antes de enviar o usuário para a página protegida ou o painel.

A função usa o parseHash do objeto Auth0 dentro de nosso estado para verificar se o usuário tem o token de acesso e id_token e, em seguida, os salva localmente antes de enviar o usuário ao painel. Por outro lado, se houver um erro, o usuário verá um erro e será redirecionado para a página inicial.

//auth0HandleAuthentication.js importar roteador de'../../../router/index'
const auth0HandleAuthentication=(contexto)=> { context.state.auth0.parseHash ((err, authResult)=> { if (authResult && authResult.accessToken && authResult.idToken) { let expiresAt=JSON.stringify ( (process.env.VUE_APP_EXPIRY * 1000) + new Date (). getTime () ); //salve os tokens localmente localStorage.setItem ("access_token", authResult.accessToken); localStorage.setItem ("id_token", authResult.idToken); localStorage.setItem ("expires_at", expiresAt); router.push ({nome:"painel"}) } else if (err) { alert ("Há um problema com a inscrição", err) router.replace ({name:"home"}) } })
};
exportar auth0HandleAuthentication padrão;

logout

Usamos o botão logout para desconectar o usuário. Leva o usuário de volta ao site do Auth0 para desconectá-lo de nosso aplicativo completamente. Em seguida, ele os envia de volta ao nosso aplicativo usando os URLs de logout permitidos que adicionamos anteriormente.

//logout.js const logout=()=> { localStorage.removeItem ("access_token"); localStorage.removeItem ("id_token"); localStorage.removeItem ("expires_at"); window.location.href= process.env.VUE_APP_AUTH0_CONFIG_DOMAINURL + "/v2/logout? returnTo="+ process.env.VUE_APP_DOMAINURL + "/& client_id="+ process.env.VUE_APP_AUTH0_CONFIG_CLIENTID;
};
exportar logout padrão;

//fazendo logout na página do painel  
 
 Aqui está o painel 
  Sair  

Mutações Vuex

Teremos apenas uma mutação que será usada para acionar nosso indicador userIsAuthorized em nosso estado.

 const setUserIsAuthenticated=(estado, substituição)=> { state.userIsAuthorized=substituição;
}

vue-router

É aqui que as ações serão acionadas e os usuários serão direcionados, com base em certas condições em nossos guardas de rota.

O fluxo do usuário é direto:

1. O usuário tenta fazer login
2. Enviamos o usuário para o portal de login Auth0 para autenticação
3. Eles são então enviados de volta ao nosso aplicativo (página /authfinalize especificamente) com o token de acesso , id_token , etc.
4. Salvamos esses tokens localmente com o tempo de expiração e redirecionamos o usuário para a página segura

Ao configurar nossas rotas, adicionaremos o objeto meta para cada rota. Isso nos permitirá identificar as rotas que são abertas a todos usando requiresGuest e as rotas protegidas usando requiresAuth .

Essas propriedades meta podem ser acessadas no local da rota e nas guardas de navegação.

 importar Vue de"vue";
importar VueRouter de"vue-router";
import Store from"../store"
import Home from"../views/Home.vue";
importar Authfinalize de"../views/Authfinalize"
importar o painel de"../views/Dashboard"
Vue.use (VueRouter);
rotas const=[ { caminho:"/", nome:"casa", componente: casa, meta: { requer Convidado: verdadeiro, } }, { caminho:"/painel", nome:"painel", componente: Dashboard, meta: { requerAuth: verdadeiro } }, { caminho:"/authfinalize", nome:"Authfinalize", componente: Authfinalize, },
];
roteador const=novo VueRouter ({ modo:"histórico", base: process.env.BASE_URL, rotas,
});
router.beforeEach ((para, de, próximo)=> { const requerAuth=to.matched.some ((x)=> x.meta.requiresAuth); const requireGuest=to.matched.some ((x)=> x.meta.requiresGuest); const auth0callback=to.matched.some (record=> record.path=="/authfinalize"); deixe routerAuthCheck=false; if (auth0callback) { Store.dispatch ('auth0HandleAuthentication'); próximo (falso); } if (localStorage.getItem ('access_token') && localStorage.getItem ('id_token') && localStorage.getItem ('expires_at')) { let expiresAt=JSON.parse (localStorage.getItem ('expires_at')); routerAuthCheck=new Date (). getTime () 
 Em nosso protetor de roteador  beforeEach , devemos verificar qual  meta-objeto  a rota pretendida possui e atribuí-lo de acordo com um  requiresAuth  ou variável  requerGuest . Também podemos criar uma variável  auth0callback  se estivermos navegando para o caminho /authfinalize . 
 Em seguida, criamos uma variável chamada  routerAuthCheck  e atribuímos a  false . Usaremos essa variável para acionar a mutação que mudará o indicador em nosso Vuex, sobre o qual falamos anteriormente. 
 O primeiro  if block  verifica se estamos navegando para a rota /authfinalize  e, em seguida, chama a  auth0HandleAuthentication . Observe que a única vez em que navegaremos para essa rota é quando estivermos sendo redirecionados de volta do Auth0. 
 O segundo  if block  verifica se o usuário está autenticado e então faz um  commit , que muda nosso indicador para  true  quando conectado e vice versa. Basicamente, ele verifica o armazenamento local para ver se os tokens e a data de expiração ainda estão lá. 
 Em seguida, verifica se a data de validade é maior que a hora atual.  routerAuthCheck  refletirá se é  true  ou  false , e então se comprometerá com a mutação  setUserIsAuthenticated , que muda nosso indicador de aplicativo. 
 O terceiro  if   block  verifica se a rota pretendida requer autenticação ( requiresAuth ) e, em seguida, verifica se o  routerAuthCheck  é  true  ou  false . Se  true , o usuário segue para o painel. Se  false , o usuário é desconectado. 
 O último  if block  verifica se um usuário autenticado está roteando para a página inicial ( requiresGuest ). Em seguida, ele os envia automaticamente para o painel. 
 Implementando seu aplicativo 
 Para implantar o aplicativo, você precisa adicionar seu URL ativo a cada uma das configurações demonstradas anteriormente. Separe cada um dos URLs com uma vírgula. 
  
  
 Lembre-se de que você terá que criar um novo arquivo .env  e definir o URL para a versão ao vivo em sua base de código ou na plataforma em que está implantando, dependendo da plataforma em que estiver usando para implantação. 
 Conclusão 
 Embora existam  outros métodos de manipulação de autenticação  , ferramentas como Auth0 podem dar a você a vantagem de tempo enquanto você ainda tem certeza da segurança de seu aplicativo. Você pode  verificar nossa base de código no GitHub  e  encontre o site de demonstração aqui . Você também pode descobrir mais na  documentação do Auth0 . 
 A postagem  Manipulando autenticação no Vue. js usando Vuex, Vue Router e Auth0  apareceu primeiro no  LogRocket Blog .