如何从服务器响应中提取JWT令牌？

Question

I'd like to receive JWT token fron express back into my vue.js app using axios.

Here is what I came up with:

 handleSubmit: function () {
            axios.post( this.BASE_URL + "/users/login", {
            username: this.username,
            password: this.password,
          }).then( (res) => { 
                console.log('res is:', res); //JWT found here 
                console.log('token is:', res.headers.common['Authorization']); //<-Problem here

                this.$router.push({ path: '/' });
           })
            .catch( (error) => {
            this.showErrorLogin = true;
            if (error) {
             this.error  = error;
             }  
          });

After a scussessful post, I receive this in the console :

      res is: {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}data: success: truetoken: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjViODZmOTE4YWNiMmI2Nzk3ZmEyYzFjNCIsInVzZXJuYW1lIjoiamFzZW0iLCJpYXQiOjE1MzYxNTgyNTAsImV4cCI6MTUzNjE5NDI1MH0.Sgl8cTHTQxU8rvBWdr365SBKABnUdbeUNHYLflqXURM"__proto__: Objectheaders: {content-type: "application/json; charset=utf-8"}request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}status: 200statusText: "OK"__proto__: Object


token is: undefined

but I don't know how to extract it. I've also tried res.headers['Authorization'] but get undefined instead.

Answer 1

The token can be passed in many ways

 // check header or url parameters or post parameters for token
  const token = req.body.token || req.query.token || req.headers['x-access-token'] || req.headers['Authorization'] || req.headers['Bearer'];