An innovative concept of housing two distinct retailers under one app

Question

An innovative concept of housing two distinct retailers under one app

I am facing an issue with my vue.js application that consists of a landing page, user dashboard, and admin dashboard. Each section has different states, but they all share a common shared module with important data like page width, token, current user, etc.

The problem arises because vuex allows only one centralized store, meaning anyone visiting the landing page can view the entire structure of the store, posing a potential security risk.

An ideal solution would involve something along these lines:

store: Object.merge({}, SharedStore, UserDashboardStore),

And in another scenario:

store: Object.merge({}, SharedStore, AdminDashboardStore),

where the variable is an instance of Vuex.Store.

However, this method does not work as expected. Are there any better alternatives to address this issue?

javascript vue.js vuex

Answer 1

Answer №1

Apologies if there is any confusion in your query, but have you considered the option of creating multiple stores? It's important to keep in mind that anything stored on the client side may be accessible to users. Therefore, avoid storing sensitive information on the client side.

/store/admin/actions.js
/store/admin/getters.js
/store/admin/mutations.js
/store/admin/state.js
/store/admin/store.js
/store/user/actions.js
/store/user/getters.js
/store/user/mutations.js
/store/user/state.js
/store/user/store.js
/store/actions.js
/store/getters.js
/store/mutations.js
/store/state.js
/store/store.js

/store/store.js

import Vue from 'vue'
import Vuex from 'vuex'

import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"
import moduleAdmin from './admin/store.js'
import moduleUser from './user/store.js'

Vue.use(Vuex)

export default new Vuex.Store({
    getters,
    mutations,
    state,
    actions,
    modules: {
        admin: moduleAdmin,
        user: moduleUser,
    },
    strict: process.env.NODE_ENV !== 'production'
})

/store/admin/store.js

import state from './state.js'
import getters from './getters.js'
import actions from './actions.js'
import mutations from './mutations.js'

export default {
    namespaced: true,
    state: state,
    getters: getters,
    actions: actions,
    mutations: mutations,
}

To access variables:

return this.$store.state.someVariable;
return this.$store.state.admin.someVariable;
return this.$store.state.user.someVariable;

Answer 2

Apologies if there is any confusion in your query, but have you considered the option of creating multiple stores? It's important to keep in mind that anything stored on the client side may be accessible to users. Therefore, avoid storing sensitive information on the client side.

/store/admin/actions.js
/store/admin/getters.js
/store/admin/mutations.js
/store/admin/state.js
/store/admin/store.js
/store/user/actions.js
/store/user/getters.js
/store/user/mutations.js
/store/user/state.js
/store/user/store.js
/store/actions.js
/store/getters.js
/store/mutations.js
/store/state.js
/store/store.js

/store/store.js

import Vue from 'vue'
import Vuex from 'vuex'

import state from "./state"
import getters from "./getters"
import mutations from "./mutations"
import actions from "./actions"
import moduleAdmin from './admin/store.js'
import moduleUser from './user/store.js'

Vue.use(Vuex)

export default new Vuex.Store({
    getters,
    mutations,
    state,
    actions,
    modules: {
        admin: moduleAdmin,
        user: moduleUser,
    },
    strict: process.env.NODE_ENV !== 'production'
})

/store/admin/store.js

import state from './state.js'
import getters from './getters.js'
import actions from './actions.js'
import mutations from './mutations.js'

export default {
    namespaced: true,
    state: state,
    getters: getters,
    actions: actions,
    mutations: mutations,
}

To access variables:

return this.$store.state.someVariable;
return this.$store.state.admin.someVariable;
return this.$store.state.user.someVariable;

An innovative concept of housing two distinct retailers under one app

Answer №1

Similar questions

Encountering difficulties displaying navigation interface with react native navigation's stack navigator

When dynamically loaded HTML is involved, Javascript ajax calls often fail to execute properly

Issue with jQuery incorrectly calculating height post-refresh

Mapping an object in ReactJS: The ultimate guide

Challenges encountered when attempting to send an array in res.json with the MERN stack

The React application functions smoothly when executed using react-scripts start, but encounters an "Unexpected SyntaxError: Unexpected Token: <" error upon building

What is the Vercel equivalent to .netlify/functions?

What is the best way to send the $_SESSION['var'] array to jquery and initiate an ajax request?

Obtain user input dynamically rather than statically assigning values in an array

What is the best method for retrieving information from MongoDB and presenting it in a table with Node.js?

Connecting nodes to edges based on their unique ids in the d3.js graph library

Guide on exporting member formModule in angular

The pagination in Laravel Vue is causing a validation error due to an invalid prop type check failing

Tips for maintaining user sessions in Passport.js and PhoneGap: "remembering" a user after logging in

Creating and implementing a HTML template from scratch, devoid of any frameworks

Is it possible to use HTML alone in Bootstrap 5 to link a button to display a toast notification?

Tips for transferring a function from a Node.js server to a client

Troubleshooting Event Tracking Problems with Brave Browser on PostHog

Tips for Creating a CSS Radio Button in ASP.NET

Inject the contents of an HTML file into a Vue div