JWT Authorization with Axios and Vue.js (Header)

Question

I'm still pretty new to web development, so I apologize in advance if the solution is obvious or my question is asked poorly.

So: I would like to use JWT to authenticate my users. I use axios, vue.js and of course JWT. I would like to access a secure route:

router.post('/secureroute', checkAuth, (req, res) => {
res.status(200).json({
    message: 'all ok'
})
});

In order to do so, I use this check-auth.js:

const jwt = require('jsonwebtoken');

module.exports = (req, res, next) => {
 try {
    const token = req.headers.authorization.split(" ")[1];
    console.log(token);
    const decoded = jwt.verify(token, process.env.SECRET_KEY);
    next();
} catch (error) {
    return res.status(401).json({
        message: 'Auth failed'
    })
}

next();

}

part of my Login.vue:

methods: {
 login() {
  if (!this.username) this.alertUsername = true;
  if (!this.password) this.alertPassword = true;

  axios
    .post("/user/login", {
      username: this.username,
      password: this.password
    })
    .then(res => {
      localStorage.setItem("usertoken", res.data.token);
      if (res.data.token) {
        console.log("Success");
        router.push({ name: "start" });
      } else {
        this.alertWrong = true;
      }
      this.username = "";
      this.password = "";
    })
    .catch(err => {
      console.log(err);
    });
  this.emitMethod();
}

Using postman with an authorization header, everything seems to work fine. But after hours of searching the Internet and trying things out, I simply do not know how to make it work with the real website. I would like to pass the JWT as an authorization-header. I know that it is possible with axios, but I really don't know how I can do so in my example here.

Sumurai8 · Accepted Answer · 2019-01-18 21:40:08Z

You've got your login flow, and you are storing the usertoken in localStorage as the usertoken key. You also verified that your requests are processed correctly if the authorization header is set.

The easiest way to work with api requests is by abstracting axios a bit more, to automatically add the authorization token, and maybe pre-process the response you get back. For example, you may want to handle some errors globally instead of on a case-by-case basis, or want to transform the request into something that is always the same.

You first want to make some abstraction that calls axios.request. You can pass it a configuration object as described here. What's most important for you right now is the headers key-value pair, but you may want to expand this in the future.

export default request (config) {
  const userToken = window.localStorage.getItem('usertoken');

  const requestConfig = { ...config };
  if (!requestConfig.headers) {
    requestConfig.headers = {};
  }

  if (userToken) {
    requestConfig.headers.authorization = `Bearer ${userToken}`;
  }

  return axios.request(requestConfig);
}

Now we can expand on that:

export default post (url, data = {}, config = {}) {
  return request({
    ...config,
    method: 'POST'
    url,
    data
  });
}

When inspecting the request in your developer console you should now see that, if the user token is correctly set in localStorage, you have an extra header in your request that is sent to the server.

Collectives™ on Stack Overflow

JWT Authorization with Axios and Vue.js (Header)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related