i'm new to vuejs, I hope you are well? I have a quick question about token storage and user information (name, etc.....). For the moment I use the following configuration. The user enters his information and logs in, this triggers an action in the login store that retrieves the token and user information, once retrieved it triggers mutations that change the states of the variables and records the data in local storage. . I have seen configurations where people directly assign local storage in the variables of the example states:
state: {
token: localStorage.getItem('token'),"
}
Logically, it is the mutations that can modify the states and technically here it is localstorage. Is this good even so at the level of conventions?
Here is a diagram of how I proceed, is this the right solution?.
Thank you in advance
Related
i have an old asp.net web-form based application, which i want to convert to Vuejs based front-end and Asp.Net Core base api as back-end.
The current application has a login page, where the user inputs his credentials, once the credentials got verified, user is taken to application home page, which has side menu bar.
The side menu bar is loaded based on the current users role/privilege. Say for example, a user with role of admin may have 10 menu items, while a normal user may have only 5 menu items.
I'm very new VUE, so pls guide me, how to set up the vue application and routing for above scenario.
Thanks in advance.
There are many ways to go about this, your goal is to load data about your user into your application.
One way to solve this is to create an API function that returns information about the currently logged on user.
The authentication of the request can be done through cookies, jwt header or something else.
The api call to get the authenticated user data will also help you figure out if the user is already logged on when the app starts up.
Putting aside how you make the network request, lets say you now have the data in your application.
There are a few choices on how to store it, this is an architecture choice as the results of this will likely have effect on many other parts of your application.
The common solution to storing application-wide (global) state is to use Vuex.
This will also play well together with vue-router.
Lets say that in Vuex you will make a field roles that will hold an array of strings, indicating the roles the user has.
In a vue component you can reach the vuex store from the $store property (this.$store in the code, $store in templates).
The state of the store is then reachable via $store.state, and your roles array would exist over at $store.state.roles.
To set the roles you will have to setup mutations that will let you save the roles, and the api call would be part of an action. You can read more about that on the vuex documentation on how to update the state.
I'm relative new to Vue.js. Our application needs to restrict / secure access to specific pages based on user role(s) and consequently also display just the respective item in the menu.
I would like to understand what's the recommended approach to store the user role information and retrieve where necessary to take these decisions.
I searched around and landed in pages about Vuex Store, maybe storing in the Session Storage, or even libraries like CASL, but if any, I got even more confused.
I would appreciate any feedback from experienced Vue developers.
I would recommend you to store user data in the dedicated Vuex module state (say's "account") and create getters to get computed values, one of which will be, say's isAuthenticated. The most common way to check if a user is authenticated is just to get the state value (because the default value should be null).
state: {
account: null
},
actions: { // Here we will fill the account state },
getters: {
isAuthenticated (state) {
return Boolean(state.account);
}
}
P.S. - In special cases, user data could be stored in LocalStorage, SessionStorage, Cookies, etc., in which case you can still get access to this data through Vuex still. But basically, we only store tokens in these stores.
I'm building my first 'bigger' web-app (only for learning purposes & my portfolio) with the vue.js-framework. I want to implement (for the fist ever time) the possibility to login using Google's API. My question is: where would I 'store' the user-obj? It should contain information like the user-id, name, email, ... . Would I store that obj in a Vuex store in my case? Or do I not even need to store such an object as the API provide all these information?
Well, it totally depends on the needs of your project and the information that is being stored.
If the information being returned in your user object doesn't contain any sensitive information that can be used by potential hijackers to steal other information then you could always store it in local storage, cookies or runtime variables in your code. Normally, vuex store is used for manipulating the local storage. This really helps when you are accessing the data from local storage via multiple components or nested components.
But if you have sensitive information being returned from the authentication authority, like the user id or user hash string then you might not want to store them in your local storage.
Additionally, you should only use this when:
You want to keep a track of user details even when the user closes and re-opens the browser
Passing the data set from one component to all other components is not really feasible
You need to keep the state of the data set synced in all components, so if it changes in one place, it will auto-reflect in the other place.
You need to frequently access the same dataset and it doesn't really change often, so as to avoid multiple api calls to back end server.
One scenario, I can think of is of the JWT token authentication. If you're not familiar with this approach, we usually authenticate the user and store his token in the local storage via vuex and all the api calls in all the components and views start using this same token as bearer token in the requests. When the token expires a new token is fetched and updated in local storage and the change is automatically reflected in all other places.
So it makes sense to check the needs of your project/code. If your project demands the use of the returned user object and it's safe to store it, please go ahead by all means!
I have checked many links and found that AsyncStorage is the best way to store any data but it is a persistent way. I just need to know if there is any other way to store session data which can should be available for a particular session like when a user logs in to my app.
In my use case, the user logs in with credentials and then we need user specific data to be displayed anywhere we need, like other screens. Any other way apart from Asyn Storage should I be using?
I would recommend libraries react-native-keychain, realm or sqllite
https://github.com/oblador/react-native-keychain
https://realm.io/products/realm-database
https://github.com/andpor/react-native-sqlite-storage
I hope the following article will help you to learn about these libraries and alternatives.
https://www.simform.com/react-native-database-selection-guide/
Hope this will help.
So, if you are not using redux you can either use Asyncstorage or sqlite or realm.
I would still prefer using Async storage as its persistant.
So what your problem statement looks like is a global value which can be displayed all over the app based on user session.
So when a user logins, you can set the Asyncstorage as
await AsyncStorage.setItem('#storage_Key', value)
and when you want to retrieve :
const value = await AsyncStorage.getItem('#storage_Key')
and suppose when the user logs out so you want to delete the async storage value as thats related with that user, you simply call the below on logout :
await AsyncStorage.removeItem('#storage_Key')
Hope it helps. feel free for doubts
I'm working on a web app using Vue.js/Vuex and when the user refreshes the page the state is lost.
I'm trying to persist some states in sessionStorage, but I realized that a user can edit it and for example make a state true and turn it into false.
My question(s) are:
Can a user edit the sessionStorage?
Is it safe to store a state in a sessionStorage?
Can I persist the state in another way without adding another dependency on the project?
--------------UPDATE-----------------
For people with a similar problem I solved using beforeEnter and beforeEach so instead of trying to persist the state I go to a backend endpoint everytime the route changes (with beforeEach) and every page refresh (with beforeEnter).
Thanks to everyone for the helpful responses!
I guess your concern is about saving credentials in the store to sessionStorage. Storing tokens should be fine as long as you have robust authentication/validation logic at the backend. Don't store password though.