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?
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 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/
i am not a developer but i am deploying a web application using nuxt and i have a doubt about load all information related to the users once in the application, all the information is managed by vuex. I need to load all information after the authentication process because i am showing a dashboard to the user. I have read and found the next options but i don't know where is the best practice without impact the performance of the application:
1.- Load all information in the same vuex action where the user authenticates. I have an action to validate the user and password and it creates the cookies and token sessions. I can load all information in the same action but the authentication process could be slower. With this option the load of information is executed just once.
2.- Load all information in the main/dashboard component by the fetch function consuming an vuex action (do a dispatch). It works but i am seeing that when i browse to the main/dashboard component the fetch function is always appearing. Load of information should be once after the authentication process.
3.- I also am using the nuxtserverinit to load all information when the users press F5 button or reload the web application but if i do a reload in the main/dashboard component i am seeing nuxtserverinit and fetch functions . I am duplicating resources.
I really appreciate your help.
Thanks in advance.
Loading application content is not a part of authentication process, so it should be separated because of responsibility concerns.
It is a good practice to load content on the page which it is relevant to. Using fetch repeats itself, but it is possible to check if content has been loaded inside fetch hook and dispatch action only if required state is not present is store.
This way no additional requests are made and information is only loaded after user has been granted access to the dashboard.
I am new to react-native and redux. I have successfully created a login function which calls a post-request api. The credentials insert by a user are matric no and password. I have another post-method api need to be called to display a list of data in another page after the user successfully logged on. However I dunno how to pass the matric no to another page since there is no event that ought to trigger the user to enter their matric no i order to call the post-method api. Can somebody help me how to solve this?
Use Redux Store or AsyncStorage to store important login information like token or your matrix no.
Retrieve on next page in componentWillMount() and send to Ajax to validate and get data.
ref : https://facebook.github.io/react-native/docs/asyncstorage.html
you might want to use react redux. Using this u can acess anything from anywhere fast and simple.
Its a little hard to setup but once u have setup its easy to manage and u get info anywhere in the app refer this link: Getting started with Redux.
It covers different aspects of using redux. Starting off with a simple example of counter. It also deals with how to manage an api call where the result can be accessed anywhere from the app.
Good luck!