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.