Vue.js & Vuex - Store access token in store and redirect user to an URL for login

Question

I'm trying to store the access token into the createStore (index.js) and then redirect the user to go to another webpage once they login.

For this I need to create a mutation within mutations.js so that I can set the access token and set the refresh token. The refresh should be like a time stamp.

The test.vue is where the login code is to validate the user.

So, basically I need to create a function, set the access token, set the refrefresh token and then redirect the user to another webpage once they pressh the login button.

Many thanks in advance!

index.js:

import vuex from 'vuex';
import mutations from './mutations';

const createStore = () =>{
    return new vuex.Store({
        state: {
            accessToken: "halo",
            access_token: response.data.access_token,
            refresh: response.data.refresh_token
        },
        getters:{
            accessToken(state, getters){
                return state.accessToken;
            }
        },
        mutations
    });
};

export default createStore;

mutations.js:

const mutations = {
    setToken(state, token) {
      state.accessToken = token;
    }
  }

  export default mutations;

test.vue:

<template>
    <form>
        <div class="login">
            <div>
                <input name="email" type="text" v-model="email" v-validate="'required'" placeholder="Email" class="eSection" id="email">
                <p v-show="wrong.email">
                    Email is missing or incorrect. Please try again!
                </p>

                <i name="emailFormat" type="text" v-validate="'required|emailFormat'" placeholder="Email" class="eSection" id="email"></i>
                <p v-show="wrong.emailFormat">
                    Not valid email!
                </p>

                <input name="password" type="password" v-model="password" v-validate="'required'" placeholder="Password" class="pSection"
                    id="password">
                <p v-show="wrong.password">
                    Password is missing or incorrect. Please try again!
                </p>

                <p v-show="wrong.all">
                    Login Details Incorrect!
                </p>

                <button type="button" class="log" @click="login">LogIn</button>
            </div>
        </div>
    </form>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            email: "test@gmail.com",
            password: "123456",
            flag: false,
            wrong: {
                email: false,
                emailFormat: false,
                password: false,
                all: false
            },
        }
    },

    methods: {
        login: function (index) {

            this.wrong.email = false;
            this.wrong.password = false;
            this.wrong.all = false;
            this.wrong.emailFormat = false;

            axios.post(`https://api.ticket.co/auth/login`, {
                    email: this.email,
                    password: this.password
                })

                .then(response => {
                    // JSON responses are automatically parsed.
                    console.log(response.data)
                    console.log(response.status)
                })

                .catch(e => {
                    console.log(e)
                    console.log(e.response.status)

                    var vueObject = this

                    switch (e.response.status) {
                        case 400:
                            if (!vueObject.email) {
                                console.log(1)
                                this.wrong.email = true;
                            } else if (!vueObject.emailFormat) {
                                console.log(2)
                                this.wrong.emailFormat = true;
                            };

                            if (!vueObject.password) {
                                console.log(3)
                                this.wrong.password = true;
                            }
                            break;

                        case 401:
                            console.log(4)
                            this.wrong.all = true;
                            break;
                    }
                })
        },
    },
}
</script>

Answer 1

I think there are two possible solution for this problem.

• First: you can use vue-router. In that case, there will be no page refresh, just component change. That way untill you refresh the page, every vuex state will live. (But its not the best solution).
• Second; You can write a rest call, what is give you back the actual user token, if the user authenticated. So only this rest api call use session authentication and / or CSRF token (check wiki if you don't know it). One of the most elegant way if you use axios interceptor (run before every axios call), what will get the token if the user is authenticated. Check this github comment for futher information. (Make sure, that session timeout is longer then token lifetime :) )