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)
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
I have fixed it by adding the following headers:
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
is there any standards to be return in header??