For example: if we have user data (username, fullname) and we use it in our components where should we store this: vuex or localstorage?
Vuex store is used to maintain the current state of your application, whereas local storage is used as a persistent state.
I would only want to save usernames and full names of my users while they are using the application as those are personal details and shouldn't be accessible while not being logged in. Especially for public computers this would be a privacy concern.
Related
I am working on a project with vuejs3. I need to save some data somewhere globally and call another page. I was using local storage for this, but this doesn't feel right and it gets harder to manage as the project grows.
at user login
lookie.set("userType", "student")
at another component
lookie.get("userType")
For example, there are two user types as student and teacher in the project, I keep their user type in the local storage at the user login, and I do not display some components if the user type in the local storage is student.
I used the state structure, but it didn't work for me because it reverts to its default value when the page is refreshed. What kind of structure do you think I should set up?
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 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'm currently using cookies to store my employee_id. This employee_id is needed as a params to one of my list in the navigation menu that will redirect them to a private page /private/:id. I read that users can edit browser cookies, thus can see other employee's private page.
I also tried vuex and sessions storage.
Does session storage have an expiration time?
Is it better to just store the id in the vuex store and call the setEmployeeID function in created() so even if the user refreshes, the data won't disappear since it is always using axios call to get the id?
Everything that gets to the client can be edited / viewed, including cookies, storage, etc.
If you have some info that you don't want to be exposed to another users - store it on server and do authentication. Do it using Vuex and you will be fine.
Session storage - is per tab and destroyed when the tab destroyed
Cookies - here is explanation regarding cookies securing: https://blog.dareboost.com/en/2019/03/secure-cookies-secure-httponly-flags/
So i was thinking, what is the best practices when it comes to building front end that need to talk alot to an api backend.
My scenario, iam building frontend with vue that consumes a node, express api as backend. A simple todo app.
Right now i do this.
User log in and all todos, categories, and userinfo is fetched and saved in my vuex store
if user close page and open it again or reloads the page the vuex store resets ofc so i check if the user is still loggedin then i fetch all data again and save it in my vuex store the same way as i do when a user logging in.
user can now browse around the app and no need to call api because the store has all data the frontend needs. this saves a lot of API calls ofc.
if user creates a new or edit some todo, category or userinfo i send it to the api and once again fetching all data again like i do when user logging in.
So this way the store always has the correct data. And it works ofc, but iam thinking that it only works good for small applications. So if my user starts adding 10000s of todos and categories it would be a lot of data to fetch and save in the store.
So is the best practice to only fetch data from api when user needs it in the frontend like showing todos or categories but that would also require a lot more api calls?