websanova / vue-auth

A simple light-weight authentication library for Vue.js
MIT License
2.36k stars 380 forks source link

token is not set #330

Closed Rockatweb closed 6 years ago

Rockatweb commented 6 years ago

Hi, i have the problem, that the login request does not set the token that it receives from the APIs Authorization Header.

So the request response from the api is this:

bildschirmfoto 2018-03-05 um 20 08 58

And i put a console.log in the bearer.js but as you can see there is no Authorization Header. What am i doing wrong? oO

bildschirmfoto 2018-03-05 um 20 09 18

The Login Code

<template>

    <div id="overlayBox">

        <div id="overlay">
            <div class="topBox">
                <img src="../../assets/images/logo_white.svg" class="logo" />
            </div>
            <div id="adminLogin">

                <form v-on:submit.prevent="doLogin()" method="post">

                    <label for="login">Name</label>
                    <input type="text" name="name" v-model="login.name" id="login" />

                    <label for="password">Passwort</label>
                    <input type="password" name="password" v-model="login.password" id="password" />

                    <div v-if="error !== ''">
                        {{error}}
                    </div>

                    {{$auth.check()}}

                    <input type="submit" value="Einloggen" />
                </form>

            </div>
        </div>
    </div>

</template>

<script>
    let qs = require('qs');

    export default {
        data() {
            return {
                login: {
                    name: '',
                    password: ''
                },
                error: ''
            }
        },
        methods: {
            doLogin() {
                this.$auth.login({
                    url: process.env.API_URL + 'data/login',
                    data: qs.stringify(this.login),
                    method: 'post',
                    success: (response) => {
                        console.log('ok', this.$auth);
                    },
                    error: (reject) => {
                        this.error = 'Login fehlerhaft'
                    },
                    redirect: '/admin',
                    fetchUser: false
                });
            }
        }
    }

</script>

and the app.js


Vue.router = router;

Vue.use(VueLocalStorage);

Vue.config.productionTip = false;

Vue.use(VueAxios, axios);

Vue.axios.defaults.baseURL = process.env.API_URL;
Vue.axios.defaults.headers.common['Accept'] = 'application/json';
Vue.axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
Vue.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

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.js'),
    router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
    authRedirect: {
        path: '/admin-login'
    },
});
websanova commented 6 years ago

The header is not name correctly ;)

On Mar 6, 2018 02:19, "Rockatweb" notifications@github.com wrote:

Hi, i have the problem, that the login request does not set the token that it receives from the APIs Authorization Header.

So the request response from the api is this:

[image: bildschirmfoto 2018-03-05 um 20 08 58] https://user-images.githubusercontent.com/2091906/36994483-915ee262-20b1-11e8-8132-057a446d97ab.png

And i put a console.log in the bearer.js but as you can see there is no Authorization Header. What am i doing wrong? oO

[image: bildschirmfoto 2018-03-05 um 20 09 18] https://user-images.githubusercontent.com/2091906/36994535-b37f5cf0-20b1-11e8-9fd0-395b6a601685.png

The Login Code

and the app.js

Vue.router = router;

Vue.use(VueLocalStorage);

Vue.config.productionTip = false;

Vue.use(VueAxios, axios);

Vue.axios.defaults.baseURL = process.env.API_URL; Vue.axios.defaults.headers.common['Accept'] = 'application/json'; Vue.axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; Vue.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

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.js'), router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'), authRedirect: { path: '/admin-login' }, });

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/websanova/vue-auth/issues/330, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkcyzi1WJwJhgyogJ4hw82iqEM5tM0xks5tbY_DgaJpZM4SdAUU .

websanova commented 6 years ago

need to use basic auth if you don't include bearer

Rockatweb commented 6 years ago

wait, what is wrong with the name of the Header?

I tried the basic auth and there is also no Authorization header.

bildschirmfoto 2018-03-06 um 08 52 06

hamdallah90 commented 6 years ago

+1

websanova commented 6 years ago

You need to return header in proper format for the driver.

On Tue, May 1, 2018, 05:11 hamdallah90 notifications@github.com wrote:

+1

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/websanova/vue-auth/issues/330#issuecomment-385544201, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkcy0ulK2-uS4UbFKOJpZTEkyMSqNBPks5tt4wHgaJpZM4SdAUU .

meliborn commented 6 years ago

Have the same issue. In devise driver's response method, res variable comes only with 2 headers. monosnap 2018-06-07 16-33-21

But server response looks like: monosnap 2018-06-07 16-35-52 Where're other headers?

meliborn commented 6 years ago

Got it. It's due CORS policy. You should set expose headers on the server. More info https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields

borie88 commented 6 years ago

That did it, thanks @meliborn . Anyone using Quasar Framework should have to do this on their dev server