jwt authentication with vuejs

Question

I’m a little confused with the authentication using jwt token, I have an application in vuejs + Vue-router, I don’t want to use vuex until I learn to do it without it (I don’t like to use what I don’t understand). Then I have my API in Nodejs that grants me a payload with token when the user logs in.

My question is, now I have this token, what do I do with it? I read several articles, said to store on site Torage(vulnerable to XSS), others on cookie(vulnerable to CSRF), but I don’t want to get too safe here, because I haven’t even made it work in any way. What I did was store in Storage location when I get the response with the server token like this.

in my main.js is like this:

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

Where "to.meta.requiresAuth" means: routes that have the "meta.requiresAuth = true" element will be intercepted by logic within if.

You can see that I don’t know what verification to do, I could actually verify the existence or not of the token at the Torage site, but I believe that just checking the existence or not would be very insecure. Since you could say that you have the token and it has not yet been received by the server. But if I do this, the way I thought would be to send a post to the server and validate the token, if it is valid, then next(), if it is not redirected to the home. But I don’t know if it’s the proper way to deal with this problem. I’m kind of lost.

Answer 1

In this case, as I said in the comments, I usually save the JWT token in the Torage locale. First of all about route blocking, I usually block any and all requests by creating one interceptor in Asia. For this, you can create a js file such as a http.js that controls requests and intercepts them by checking whether the user has a valid token or not, which will eventually export an instance of Axios. Goes below:

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

Basically in each request, it will go through the method interceptors.request and check if you have the token previously, and otherwise you will return an error directly, without actually reaching the back end. The same will occur in the case of the answer, and as you said if it is not valid (401), the user is redirected to the home. To use it, it can be imported globally into your main.js or per component.

Talking about locking directly on the routes of your application, ie when going through your router, I usually do it in two ways:

To stop only one route:

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
    },
  ]

In this case it is checking the token before entering the route, and if it does not exist, the user is redirected to the login.

To stop all routes

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

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

  next();
});

Same working though will check on all routes, and if the token does not exist, will redirect to login. In this case it must have a constant Routes obligatorily, with all its routes inside.

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

I hope I’ve helped.