websanova / vue-auth

A simple light-weight authentication library for Vue.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

token is not stored in localStorage

lucianobosco opened this issue · comments

I'm trying to move from 2.x to 4.x with a very basic implementation to check how it works now. Please note that I'm using Vue 2.
My API uses Laravel/Passport and returns the following data once the login is successful:

access_token: "eyJ0eXAiOiJK................."
expires_at: 1647263178
expires_in: 31536000
refresh_token: "def50200c91..................."
token_type: "Bearer"

The auth settings are

Vue.use(auth, {
    plugins: {
        http: Vue.axios,
        router: Vue.router
    },
    drivers: {
        auth: driverAuthBearer,
        http: driverHttpAxios,
        router: driverRouterVueRouter,
        oauth2: {
            google: driverOAuth2Google,
            facebook: driverOAuth2Facebook
        }
    },
    options: {
        tokenDefaultKey: 'access_token',
        stores: ['storage', 'cookie'],

        loginData: {
            url: '/login',
            method: 'POST',
            fetchUser: true
        },

        fetchData: {
            url: '/user',
            method: 'GET',
            enabled: true
        }
    }
})

The first issue I'm facing is that the token is not stored in localStorage but rememberkey is working fine.
Am I missing something here? How it's supposed to send this token on every header request to the API?

In the previous version, I used to use interceptors, but as far I understand this is no longer needed?

request: function (req, token) {
            // Set Bearer token in header
            this.http.setHeaders.call(this, req, {
                Authorization: 'Bearer ' + token
            })

            // Set extra data in headers in case of refresh action
            if (req.url === this.options.refreshData.url) {
                this.http.setHeaders.call(this, req, { Refresh: this.token('refresh_token') })
                this.http.setHeaders.call(this, req, { Expiration: this.token('expires_at') })
            }
        },
        response: function (res) {
            const resData = res.data || {}

            // Set token
            this.token(this.options.token, resData.access_token)

            // If new refresh token then set data
            if (resData.refresh_token && resData.expires_at) {
                this.token('refresh_token', resData.refresh_token)
                this.token('expires_at', resData.expires_at)
            }

            return resData.token
        },

After searching I found this thread which droves me to a solution: #628

I just need to expose the header from the API response by using
header('Access-Control-Expose-Headers: Authorization');

Finally, I MUST to congratz you on how this plugin was improved. I basically remove a lot of code since 2.x and it's working as expected

Great work!