CODEWITHSUNDEEP
laravel-5vuejs2
Petro Gromovo
Petro Gromovo

Reputation: 2173

How to deal when llogged user refresh page of vuejs/vuex app?

in my laravel 5.8 / vuejs 2.5 / "vuex 3.1 user login into the system and some data are stored in user's store, like in auth/Login.vue:

<script>

    export default {
        ...
        mounted() {
            this.setAppTitle("", 'Login', bus);
        }, // mounted() {

        computed: {
            authError() {
                return this.$store.getters.authError;
            }
        }, // computed: {

        methods: {
            authenticate() {
                this.$store.dispatch('login');    // calling action
                login(this.$data.form)
                    .then((res) => {
                        this.$store.commit("loginSuccess", res);  // calling mutation
                        this.$store.dispatch('retrieveUserLists', res.user.id );
                        this.$router.push({path: '/websites-blogs'}); // For debugging!
                    })
                    .catch((error) => {
                        this.$store.commit("loginFailed", {error});   // calling mutation
                    });
            }
        },  // methods: {

and store where user's account and his data are kept resources/js/store.js :

export default {
    state : {
        currentLoggedUser: user,

        // personal data only for logged user
        userLists: [],
    },

    getters : {
        ...
        userLists(state) {
            return state.userLists;
        },

It works ok, until logged user refresh page (F5 or CTRL+R) and user is still logged in my page, but some data, say (userLists) are empty and some listing is empty.

I have MainApp.vue :

<template>
    <body class="account-body">
    <v-dialog/>

    <MainHeader></MainHeader>
    <div class="content p-0 m-0" style="width: 100% !important; margin: auto !important;">
        <notifications group="wiznext_notification"/>
        <router-view></router-view>
    </div>
    </body>

</template>

<script>

    ...
    export default {
        name: 'main-app',
        components: {MainHeader},

        mixins: [appMixin],

        created() {
        },
        mounted() {
            ...
        },

        methods: {
            ...
        }, // methods: {



    }



</script>

and resources/views/index.blade.php :

<?php $current_dashboard_template = 'Horizontal' ?>

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title id="app_title">{{ config('app.name', 'Laravel') }}</title>

    <link href="{{ asset(('css/Horizontal/bootstrap.min.css')) }}" rel="stylesheet" type="text/css">
    <link href="{{ asset(('css/Horizontal/icons.css')) }}" rel="stylesheet" type="text/css">
    <link href="{{ asset(('css/Horizontal/style.css')) }}" rel="stylesheet" type="text/css">
    ...
    {{--<link href="css/Horizontal/ion.rangeSlider.css" rel="stylesheet" type="text/css"/>--}}
    {{--<link href="css/Horizontal/ion.rangeSlider.skinModern.css" rel="stylesheet" type="text/css"/>--}}
    {{--<link href="css/Horizontal/powerange.css" rel="stylesheet" type="text/css"/>--}}

    <link href="{{ asset(('css/'.$current_dashboard_template.'/app.css')) }}" rel="stylesheet" type="text/css">


    ...

</head>


<body>

<div class="wrapper" id="app">

    <main>
        <div id="main_content">
            <mainapp></mainapp>
        </div>
    </main>

</div>

</body>


@include('footer')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>

<script src="{{ asset('js/metisMenu.min.js') }}"></script>
<script src="{{ asset('js/waves.min.js') }}"></script>
<script src="{{ asset('js/jquery.slimscroll.min.js') }}"></script>



<script src="{{ asset('js/app.js') }}{{  "?dt=".time()  }}"></script>
{{--<script type="text/javascript" src="{{ asset('js/vuecsv.min.js') }}"></script>--}}

</html>

Could you please to advice a proper way of such situations ? What could I do?

MODIFIED :

I tried to remake my storage and seems it works ok :

const user = getLocalUser();

export default {
    state : {
        currentLoggedUser: user,
        isLoggedIn: !!user,
        loading: false,
        auth_error: null,

        api_url: '/api',

        // personal data only for logged user
        userLists: [], // I need to save data on page refresh
    },

    getters : {
        ...
        userLists(state) {

            // that works ok after user logged into the system  and userLists is read on all page without refresh
            if ( state.userLists.length > 0 ) {
                return state.userLists;
            }

            // if userLists is empty check data in localStorage which were saved in refreshUserLists mutation
            let localStorageUserLists = JSON.parse(localStorage.getItem("userLists"));

            if ( localStorageUserLists.length > 0 ) {
                console.log("localStorageUserLists RETURNED::")
                return localStorageUserLists;
            }
            return [];
        },


    },

    mutations : {
        // that works ok after user logged into the system  and his personal data(in my case 5 rows) are read from db into the vuex store
        refreshUserLists(state, payload) {
            state.userLists = payload;
            localStorage.setItem("userLists", JSON.stringify(payload) );
        },


    },

What else have I to pay attention at ?

Upvotes: 1

Views: 1427

Answers (3)

mohammad
mohammad

Reputation: 521

you can use both localStorage and cookies.due to problems that I had with LocalStorage i recommand cookies. Vue has a rich plugin called Vue-cookies.

you can set and get data by these commands:

var user = { id:1, name:'Journal',session:'25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX' }; this.$cookies.set('user',user); // print user name console.log(this.$cookies.get('user').name)

more details: Github

Upvotes: 0

Ege Ersoz
Ege Ersoz

Reputation: 6571

I disagree with the proposed solutions. A browser refresh usually indicates that the user wants to fetch the most fresh data from the server, and reset the app state with that fresh data. Therefore you shouldn't store Vuex state in localStorage or cookies to get around this. If you do that, you now have your app state in two places, and also the user thinks they have the most fresh data when they don't.

The best way to handle a browser refresh event in a SPA is to bootstrap your state from scratch. When your app loads after a refresh, it should notice that the user is not logged in (since that is the default state), and should log them in by negotiating with the server behind the scenes, such as by sending the session cookie and receiving confirmation (or redirecting to login page if the session has expired). It should also re-fetch all relevant data from the server and store that in Vuex again.

Upvotes: 3

Julliano Osorio
Julliano Osorio

Reputation: 305

So the thing is, Vuex control your data status across your entire application and components, but once your user press F5 or any other refresh option, the Vuex is reset, there is nothing you can do about it, it's just like it works.

One work around solution i can think right now is to save the data on Vuex and maybe on localstorage, then, on vuex create lifecycle you can just populate the data with the localstorage data if it's empty.

Upvotes: 3

Related Questions