4

Estou um pouco confuso com a autenticação utilizando token jwt, tenho uma aplicação em vuejs + vue-router, não estou querendo utilizar vuex enquanto não aprender a fazer sem ele(não gosto de usar o que não entendo). Então tenho minha API em NodeJS que me concede um payload com token quando o usuário faz o login.

Minha dúvida é, agora tenho esse token, o que faço com ele? li vários artigos, disseram para armazenar no local storage(vulnerável a XSS), outros no cookie(vulnerável a CSRF), mas não quero entrar muito em segurança aqui, pois ainda nem fiz funcionar de nenhuma maneira. O que fiz foi armazenar no local storage quando recebo a resposta com o token do servidor assim.

no meu main.js está assim:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.common['Authorization'] = "Bearer" + localStorage.getItem('jwtToken')

Vue.use(VueAxios, axios)

router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth) {
        if (**O QUE COLOCO AQUI SEM UTILIZAR O VUEX?**) {
            next() 
        } else {
            next('/')
        }
    } else {
        next()
    }
})

new Vue({
  el: '#app',
  router,
  axios,
  render: h => h(App)
})

Onde "to.meta.requiresAuth" quer dizer: as rotas que possuírem o elemento "meta.requiresAuth = true" serão interceptadas pela lógica dentro do if.

Podem ver que não sei que verificação fazer, na verdade poderia até verificar a existência ou não do token no local storage, mas acredito que apenas verificar a existência ou não, seria bem inseguro. Já que poderia dizer que possui o token sendo que ainda não foi recebido pelo servidor. Mas caso eu faça isso, a maneira que pensei seria enviar um post para o servidor e validar o token, se for válido, então next(), se não é redirecionado para a home. Porém não sei se é a maneira adequada de lidar com esse problema. Estou meio perdido.

2
  • Cara acho que ambos meios de autenticação irão possuir problemas de autenticação, mas geralmente, ainda mais no Vuejs eu costumo salvar o token jwt no localStorage mesmo e crio um interceptor do axios que verifica em cada request, se o token está válido, e não faço essa verificação na rota em si. Nas rotas geralmente deixo para tratar apenas se ele possui o token no localStorage ou não. Se desejar posso fazer uma resposta com explicação e o código disto que estou falando. Estou comentando pois não é exatamente o que você quer pelo que eu entendi. Commented 14/03/2018 às 22:38
  • É pelo que vi aqui, seria isso mesmo, nas rotas no cliente liberar apenas se o token existir, e quando precisar requisitar algo na api do backend, então validar o token, caso não seja valido, enviar o 401, para assim no cliente redirecionar para home. Seria uma boa fazer uma resposta para a pergunta, se tiver com tempo.
    – PerduGames
    Commented 14/03/2018 às 23:18

1 Resposta 1

4

No caso, como disse nos comentários, eu geralmente salvo o token do JWT no localStorage. Primeiramente sobre o bloqueio de rotas, eu costumo bloquear toda e qualquer requisição criando um interceptor no axios. Para isto, pode-se criar um arquivo js como, por exemplo um http.js que faz esse controle de requisições e intercepta-as verificando se o usuário possui um token válido ou não, que por fim exportará uma instância do axios. Segue abaixo:

http.js

import axios from 'axios'

let api = 'http://localhost:8080/api/'

const http = axios.create({
  baseURL: api
})

http.interceptors.request.use((config) => {
  const token = localStorage.getItem('user-token')

  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
}, (err) => {
  return Promise.reject(err)
})

http.interceptors.response.use((response) => {
  return response
}, (error) => {
  if (error.response.status === 401) {
    window.location = '#/home'
  }

  return Promise.reject(error)
})

export default http

Basicamente em cada requisição, ele irá passa pelo método interceptors.request e verificar se possui o token previamente, e caso contrário voltará um erro diretamente, sem chegar ao back-end de fato. O mesmo irá ocorrer no caso da resposta, e como você disse caso não seja válido (401), o usuário é redirecionado para a home. Para utilizá-lo, pode ser importado de forma global em seu main.js ou por componente.

Falando sobre travar diretamente nas rotas da sua aplicação, ou seja, ao passar pelo seu router, usualmente eu faço de duas formas:

Para travar apenas uma rota:

routes: [
    {
      path: '/',
      name: 'home',
      beforeEnter: function (to, from, next) {
        const token = localStorage.getItem('user-token')

        if (!token) {
          next('/login')
        } else {
          next()
        }
      },
      component: require('@/components/Home').default
    },
  ]

Neste caso ele está verificando o token antes de entrar na rota, e caso não exista, o usuário é redirecionado para o login.

Para travar todas as rotas

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('user-token')

  if (!token) {    
    next('/login')
    return;
  }

  next();
});

Mesmo funcionamento, porém irá verificar em todas as rotas, e se o token não existir, irá redirecionar para o login. Neste caso deve ter uma constante routes obrigatoriamente, com todas suas rotas dentro.

const router = new Router({
  routes: []
});

Espero ter ajudado.

4
  • Só mais uma dúvida, e como você implementa o compartilhamento desse estado de logado ou não logado entre os componentes?
    – PerduGames
    Commented 15/03/2018 às 3:09
  • Então, para isto em minha opinião a melhor maneira é utilizando o Vuex mesmo, onde ao logar você irá disparar uma action para uma Store de Login ou Usuário, onde nela fará a requisição de autenticação. Com a resposta, irá acionar uma mutation que por sua vez, salvará em um state. Utilizando o mapState em cada componente, uma propriedade computada, você terá acesso ao usuário logado. Não comentei nada pois você não queria usar o Vuex rs. Commented 15/03/2018 às 3:42
  • sim, mas acabei lendo a doc dele e utilizando kkkk porém percebi um problema, se atualizo a página o vuex reinicia os valores do "state", como você contorna isso? Estou contornando assim no meu main.js: if (localStorage.getItem('jwtToken')) { store.commit('setIsLogged', true) }
    – PerduGames
    Commented 15/03/2018 às 4:21
  • Sim, sempre que atualizar você perde os dados. Eu estruturo minha aplicação para no primeiro componente que for criado ("pai"), o que possuir o router-view da aplicação toda, eu coloc para fazer a requisição dos dados do usuário logado no created(), assim toda vez que ocorrer o F5 (atualização da tela), sempre fará primeiro a requisição, e todos os componentes que serão sempre chamados depois dele, possuindo os dados logado. O localStorage não precisa estar dentro da Store também necessariamente, e ele não se perde na atualização da tela. Commented 15/03/2018 às 10:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .