I have a vue.js application that is accessed via a login and password.

For each user profile, a different menu type is presented depending on whether it is ADMIN or USER.

I have a problem that when 2 users refresh the page(f5) at the same time, the user's profile is repeating to the other. Example

User 1 contains in your view:

• Dashboard
• Settings
• Payments

User 2 contains in your view:

• Payments

When F5 is pressed at the same time on pages, user 1 gets the same menu as user 2.

To set up the menu and separate the constraints, I used the Created() method from the vue lifecycle itself. But I don't know if it was the best way to do this.

Below is the code that loads the information from the page, and also the point where I validate the constraints, if it is ADMIN it displays a type of view and if it is USER it displays another type:

async created() {
        
        email = '';
        user = null;
        restriction = null;

        await axios.get('/session').then(response => {
            email = response.data.currentUser;
            console.log('email', email);
        }, response => {
            (err) => console.log(err)
        });

        await axios.get('/restriction').then(response => {
            restriction = response.data;
        }, response => {
            (err) => console.log(err)
        });

        await axios.get(`/user/${email}`).then(response => {
            user = response.data;
            this.currentUserObj = response.data;
        }, response => {
            (err) => console.log(err)
        });

        await axios.get("/project").then(response => {
            this.projectListChart = response.data;
        });

        this.functions_ids.forEach(
            function (functions) {
                restriction.forEach(
                    function (restriction) {
                        if (restriction.feature_id == functions.id) {
                            if ('ROLE_ADMIN' == user.systemRole) {

                                functions.show = true;

                            } else if (restriction.profile_nme == user.data.projectRole || restriction.profile_nme == "Usuário") {

                                functions.show = false;

                            }
                        }
                    }
                );
            }
        );

        app.dashboardProjectChart();
        app.dashboardPendingTasksChart();
        app.loadDashboardCalendar();
        app.billType();
    },

Can anyone help me in what I can do to adjust this?

In the backend the information is being separated correctly, because I printed the session and the user data and they are correct.