Managing login API tokens in Vue JS

Question

Managing login API tokens in Vue JS

I have implemented a custom Login component in my Vue project:

var Login = Vue.extend({
    template: '#auth',
    data: function () {
        return {username: '',password: '',errorMessage:''};
    },
    methods : {
        login: function (e) {
            var _this = this;
            $.ajax({
                url: "/vue/api/login",
                type: "POST",
                async:false,
                data:{
                    username:_this.username,
                    password: _this.password
                },
                success: function (data) {
                    // Should I store the token in a global variable??
                    router.push({
                        path: '/employeeList',
                    });
                },
                error:function (xhr, status, error) {

                    _this.errorMessage = xhr.responseText
                }
            });
        }
    }
});

After successful authentication, the login API returns a token string. Would it be better to store this token in a global variable or locally using localStorage? Also, is there a filter available that can help check if the user is logged in, allowing for appropriate redirection?

javascript vue.js vuejs2

Answer 1

Answer №1

Utilizing VUEX is the optimal approach: a comprehensive state management system designed for Vue.

Within your vuex store.js file, you can outline the user's state like so:

const store = new Vuex.Store({ 
    state: { 
        user: {
            userName:'',
            loggedInStatus: true,
            authToken: ''
        }
    }, 
    mutations: { 
        addWebToken: function(state, webToken){
            state.user.authToken = webToken;
        },
        removeWebToken: function(state){
            state.user.authToken = '';
        }
    },
    actions: {
        login: function(context, userInput){
            $.ajax({
                url: "/vue/api/login",
                type: "POST",
                async:false,
                data:{
                    username:userInput.username,
                    password: userInput.password
                },
                success: function (data) {

                context.commit('addWebToken', webToken);

                    router.push({
                        path: '/employeeList',
                    });
                },
                error:function (xhr, status, error) {

                    _this.errorMessage = xhr.responseText
                }
            });
        },
        logout: function(context){
            //logout functionality
            context.commit('removeWebToken');
        }
    }

})

In your component > methods > login(), you can invoke the login action defined in your vuex store as follows:

var Login = Vue.extend({
        template: '#auth',
        data: function () {
            return {username: '',password: '',errorMessage:''};
        },
        methods : {
            login: function () {
                this.$store.dispatch('login', {username: this.username, ppassword: password});
            },
            logout: function(){
                this.$store.dispatch('logout');
            }
        }
    });

The benefits of this implementation :

You have a central state to manage all user information
You can preserve the state locally or as cookies using vuex- persisted state. This method stores the user's state, including the web token, even when the page is refreshed, allowing the user to remain logged in.

const store = new Store({
        // ... 
        plugins: [ createPersistedState({
            getState: (key) => Cookies.getJSON(key),
            setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
        }) ]
    })

To implement vuex persisted state plugin and utilize jscookies library to save the user's state in cookies or local storage, refer to the vuex-persistedstate documentation.

Answer 2

Utilizing VUEX is the optimal approach: a comprehensive state management system designed for Vue.

Within your vuex store.js file, you can outline the user's state like so:

const store = new Vuex.Store({ 
    state: { 
        user: {
            userName:'',
            loggedInStatus: true,
            authToken: ''
        }
    }, 
    mutations: { 
        addWebToken: function(state, webToken){
            state.user.authToken = webToken;
        },
        removeWebToken: function(state){
            state.user.authToken = '';
        }
    },
    actions: {
        login: function(context, userInput){
            $.ajax({
                url: "/vue/api/login",
                type: "POST",
                async:false,
                data:{
                    username:userInput.username,
                    password: userInput.password
                },
                success: function (data) {

                context.commit('addWebToken', webToken);

                    router.push({
                        path: '/employeeList',
                    });
                },
                error:function (xhr, status, error) {

                    _this.errorMessage = xhr.responseText
                }
            });
        },
        logout: function(context){
            //logout functionality
            context.commit('removeWebToken');
        }
    }

})

In your component > methods > login(), you can invoke the login action defined in your vuex store as follows:

var Login = Vue.extend({
        template: '#auth',
        data: function () {
            return {username: '',password: '',errorMessage:''};
        },
        methods : {
            login: function () {
                this.$store.dispatch('login', {username: this.username, ppassword: password});
            },
            logout: function(){
                this.$store.dispatch('logout');
            }
        }
    });

The benefits of this implementation :

You have a central state to manage all user information
You can preserve the state locally or as cookies using vuex- persisted state. This method stores the user's state, including the web token, even when the page is refreshed, allowing the user to remain logged in.

const store = new Store({
        // ... 
        plugins: [ createPersistedState({
            getState: (key) => Cookies.getJSON(key),
            setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
        }) ]
    })

To implement vuex persisted state plugin and utilize jscookies library to save the user's state in cookies or local storage, refer to the vuex-persistedstate documentation.

Managing login API tokens in Vue JS

Answer №1

Similar questions

One-touch dial feature for mobile-friendly website

The overflow hidden property does not seem to be effective when used in conjunction with parallax

What is causing the malfunction in this code? (Regarding the key and value variable objects)

Differences Between Using Array.push() and Literal (Bracket) Notation in JavaScript

Sending form input values to JavaScript

Utilize form binding with Vue router's push method

Changing the color of a specific span using Angular

Guide to creating a new element using jQuery

Ways to include Bootstrap Tooltips on an input field that has the type of "file"

Time-sensitive Meteor Collections that automatically expire

JavaScript TweenJS is a powerful library that simplifies

What is preventing the Date Picker in Selenium from accepting attribute values when using JavaScript for the Spice Jet application?

Initiate a fresh start with an automatic input reset

text shaped into a curve within a container

Limiting the amount of blogs shown on a single page can be achieved with Yii 1 and PHP

Use a boolean value to determine the styling of multiple items simultaneously

Is the jQuery ajax .done() function being triggered prematurely?

When there is a duplicate route in Vue-router and the back-end, which one will handle the request first - Vue.js or the back-end?

Arrangement of elements in MongoDB

Create a router link in Vue using the command "Vue