vue-auth: Authentication Problem with JWT and Token Storage

Hi,

here is my Vue Object:

Vue.use(require('@websanova/vue-auth'), {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x'),
  fetchData: {url: 'http://localhost:5000/auth/user', method: 'GET', enabled: true},
  tokenDefaultName: 'access_token',
  parseUserData: function (response) {
    console.log('found user')
    return response.data.user
  },
  tokenStore: ['localStorage']
})

Here is my login:

this.$auth.login({
                data: {
                  username: this.model.email,
                  password: this.model.password
                },
                success: function (response) {
                  alert(response)
                  console.log(response)
                  this.$auth.user = response.data
                },
                error: function (res) {
                  console.log(res.data)
                  console.log(res)
                  this.$notify({
                    component: {
                      template: `<span><strong>Oops, something went wrong... </strong><br>Not possible to login because of an internal server error</span>`
                    },
                    icon: 'fa fa-exclamation',
                    horizontalAlign: 'right', // right | center | left
                    verticalAlign: 'top', // top | bottom
                    type: 'danger'  // info | success | warning | danger
                  })
                  this.model.error_msg = 'Not possible to login'
                },
                rememberMe: true,
                url: 'http://localhost:5000/auth/login',
                redirect: '/dashboard',
                fetchUser: true
              })

The workflow should be

POST to /login the API returns the token (this works)
Store the token (this doesnt work)
Use the Token for the fetch user route (this doesnt work)

If vue posts to the /login route the API returns the following:

{
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1MjA5Mzg2MTcsIm5iZiI6MTUyMDkzODYxNywianRpIjoiZTZiNmViNTItMTI4NC00NzA5LWEwYTMtOTk5YTM4YmIyMTcwIiwiZXhwIjoxNTIwOTM5NTE3LCJpZGVudGl0eSI6eyJmaXJzdG5hbWUiOiJHZW9yZyIsImxhc3RuYW1lIjoiU2F0dGxlciIsImVtYWlsIjoiZ2VvcmdAc2F0dGxlci5pbyIsInV1aWQiOiI2ZTU1OGZjM2ExYjg0MTQ0YWQ1ODU1N2JlYWMxMjFkOCJ9LCJmcmVzaCI6dHJ1ZSwidHlwZSI6ImFjY2VzcyJ9.0EhkUXZpG4WTxhnDvQQp8i97GaNXoNyp24P7qLMRUPM", 
  "message": "successfully logged in - welcome", 
  "refresh_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1MjA5Mzg2MTcsIm5iZiI6MTUyMDkzODYxNywianRpIjoiNzAxNTAxYWYtODJjMC00YmQ5LTg1YjAtZjQ0ZTNjNzgzYmY1IiwiZXhwIjoxNTIzNTMwNjE3LCJpZGVudGl0eSI6eyJmaXJzdG5hbWUiOiJHZW9yZyIsImxhc3RuYW1lIjoiU2F0dGxlciIsImVtYWlsIjoiZ2VvcmdAc2F0dGxlci5pbyIsInV1aWQiOiI2ZTU1OGZjM2ExYjg0MTQ0YWQ1ODU1N2JlYWMxMjFkOCJ9LCJ0eXBlIjoicmVmcmVzaCJ9.gRH3nJQEaBc2_0iZ9E9fhGg-9i-fil8c5SOvh8Tvsbg", 
  "request_id": "037dd993-1c19-4c68-8e5a-e060e11d3ce8", 
  "status": "OK"
}

If i check the local storage in the dev tool it seems to be empty

How can I tell vue-auth to store the access token? Thanks

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (8 by maintainers)

Most upvoted comments

Not sure what is the official or if it there is one. I think I just kind of started it that way because that was the default in Laravel JWT plugin that I used on the API side of things.

But in general doing it via headers seems a lot cleaner than muddying up the responses.

If you really want to do it in the response body though, it’s easy enough to roll your own auth driver.

https://websanova.com/docs/vue-auth/guides/drivers

websanova on May 4, 2020

I have fixed it by adding the following headers:

header('Access-Control-Expose-Headers: Authorization');
header('Authorization: Bearer '.$token.'');

and I have a question why we should return the token from the response header as I have seen in the JWT website and all other websites will return the token from body response like that

{
  "access_token":"MTQ0NjJkZmQ5OTM2NDE1ZTZjNGZmZjI3",
  "token_type":"bearer",
  "expires_in":3600,
  "refresh_token":"IwOGYzYTlmM2YxOTQ5MGE3YmNmMDFkNTVk"
}

is there any standards to be return in header??

kosratdev on May 4, 2020