CODEWITHSUNDEEP
javascriptvue.jsvuejs3vue-authenticatevue-auth
Kenneth
Kenneth

Reputation: 2993

websanova/vue-auth not set bearer token vue 3

I used websanova/vue-auth for authentication in my vue-3 app. I follow the documentation the login was successful but when I try to get the user it did not pass the token or bearer token.

vue-auth configuration.

auth.js

import {createAuth}          from '@websanova/vue-auth/src/v3.js';
import driverAuthBearer      from '@websanova/vue-auth/src/drivers/auth/bearer.js';
import driverHttpAxios       from '@websanova/vue-auth/src/drivers/http/axios.1.x.js';
import driverRouterVueRouter from '@websanova/vue-auth/src/drivers/router/vue-router.2.x.js';
import driverOAuth2Google    from '@websanova/vue-auth/src/drivers/oauth2/google.js';
import driverOAuth2Facebook  from '@websanova/vue-auth/src/drivers/oauth2/facebook.js';

driverOAuth2Google.params.client_id = 'google-key';
driverOAuth2Facebook.params.client_id = 'facebook-key';

export default (app) => {
    app.use(createAuth({
        plugins: {
            http: app.axios,
            router: app.router,
        },
        drivers: {
            http: driverHttpAxios,
            auth: driverAuthBearer,
            router: driverRouterVueRouter,
            oauth2: {
                google: driverOAuth2Google,
                facebook: driverOAuth2Facebook,
            }
        },
        options: {
            rolesKey: 'type',
            notFoundRedirect: {name: 'notfound'},
            fetchData: { url: `auth/user`, method: 'GET', enabled: true, authType: 'bearer' },
            refreshData: { url: `auth/user`, method: 'GET', enabled: true, interval: 30, authType: 'bearer' },
            authType: "bearer",
        },
    }));
}

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import auth from './plugins/auth.js';
import axios from './plugins/axios.js';

const app = createApp(App);
app.router = router

app.use(axios)
app.axios.defaults.baseURL = process.env.VUE_APP_API_URL;

app.use(ElementPlus)
app.use(router)

app.use(auth)
app.mount('#app')

login form

await auth.login({
            data: form,
            authType: "bearer",
            redirect: '/dashboard',
            fetchUser: true,
            staySignedIn: true,
            rememberMe: true,
        })
        .then(null, (res) => {
            errors(res.response);
        });

login response

{
    "token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
    "data":{
        "id":3,
        "name":"john Doe",
        "email":"[email protected]",
        "email_verified_at":null,
        "created_at":"2022-06-25T12:36:40.000000Z",
        "updated_at":"2022-06-25T12:36:40.000000Z"
    }
}

request user enter image description here

there's no 'Authorization' in headers and also when i reload the page or go to other page using vue-router $auth.check() returned false.

what is wrong with my setup of websanova/vue-auth?

Upvotes: 2

Views: 1019

Answers (1)

Kenneth
Kenneth

Reputation: 2993

I fixed this problem on the same day. the websanova/vue-auth package will look at the token located at the header response of the API. so in my case, I'm using Laravel the solution is include the token in header response of the API.

notes: header key of token should be authorization and you should add Access-Control-Expose-Headers response header with value of Authorization

code:

// transform user data
$data = new UserResource($user);

return response()
  ->json(compact('token', 'data'))
  ->header('authorization', $token)
  ->header('Access-Control-Expose-Headers', 'Authorization');

Upvotes: 1

Related Questions