CODEWITHSUNDEEP
javascriptvue.jsauthorizationjwtaxios
Nightowl
Nightowl

Reputation: 69

JWT Authorization with Axios and Vue.js (Header)

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.

Upvotes: 2

Views: 3270

Answers (1)

Sumurai8
Sumurai8

Reputation: 20737

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.

Upvotes: 1

Related Questions