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.
Related
Being in a view and you know the area-name, controller-name and action-name of a destination to which you want the user to provide a link to, how can I figure out if the area/controller/action is authorized for the authenticated user.
Imaginary Use-case:
I have a table with a list of books (the result of bookscontroller.index). To the far right are some icons to edit or delete a specific book. The edit link refers to bookscontroller.edit and the delete link to bookscontroller.delete.
On the actions there are custom authorizationattributes and this works perfect. If a user want to access books/edit/1 and the user is not allowed to edit books, the user gets redirected to the logon page.
It is a bit stupid to have that edit-icon there if the user is not allowed to edit books. So at view level I would like to be able to figure out if the user is allowed to use the edit action of the bookscontroller. If he is, show the icon if not, do not show the action.
Goal: use that knowledge to create a custom tag-helper.
The go-to method is reactive, i.e. you check if a user can do action when the user tries to do. Since you do not want to go that way, here is how. (yet, this is anti-pattern)
Have the authentication token of the user send back to backend. The backend should have an API end point for each button on the page user can click. With the authentication token, the back-end resolve whether to dim or enable the buttons.
Now, what the backend does to resolve this is not very efficient. The backend needs to literally attempt certain actions and aborts the transaction. For create and retrieve, it is trivial (you can pre-resolve them) but for edit and delete, this requires a lot of resources.
The standard way of controlling such actions on UI is to use role based authorization.
For the buttons or other such UI elements, setup role tags, e.g. "admin:edit", "viewer:readonly" etc.
When you are authenticating a user, send the applicable roles from the backend server, store them in a way that is globally accessible to your UI and use them for filtering UI elements across your application.
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?
I am building a single page app with vue js/vuex and Laravel backend, I need the users have different roles. I am authenticating on the backend, and using a jwt token for API calls, I am not concerned that we will allow CRUD operations to be performed by a user without the appropriate permissions. What I need to have is the ability for vue to know the role of the user and maintain statelessness without tampering.
I am using vuex-persistedstate with js-cookie and it works but the cookie is clear text and if I change the "role" in the cookie then refresh the page vuex uses the new value. Obviously the data will come from the API and therefore when the token sent is for a user with role = user for data restricted to role = admin it will return 401. Am I overthinking this? If they really wont get, nor be able to change any data they aren't allowed to, just let the "hackerish" users do what they will?
I want to have app which has some default route and controller (Let's say Login page). I can register this at the Configure method but after the user successfully logs in I want to fetch the pages related to the user and register them so he can have access to it. Is there a way to achieve that?
As long as I read that's impossible but who knows, I'm new to ASP NET Core?
Based on the wording, this sounds like a security question. You only want users to have access to certain pages. If that's the case then I would look at something like role-based authorization.
If the question is more about showing the user a list of resources they can access, then the most obvious solution I can think of is to store that information in a relational database. When the user logs in, select the relevant pages / resources by user ID.
In any case, changing the registered routes is not the correct approach.
I have created 3 api, one with
owner=apicreator
visibility=public
and the others two with
owner=admin
visibility="restricted by role".
Once I opened the store home page the only api visible is the one created with apicreator, then when I logged in as admin I can see the other two apis (final count of 3).
Is it possible to show all the api (doesn't matter by the owner or creator) in the store home page, without login?
Is there any configuration change to apply or any change in the jaggery code(I don't want to change the visibility)?
Thank you in advance
Claudio
Is it possible to show all the api (doesn't matter by the owner or
creator) in the store home page, without login?
If an API's visibility is based on roles, how do you expect API Store to show it to public?
Once a user logged in to the API Store only, we can identify their roles and based on that, API will be visible to him