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.

CodePudding user response：

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.

CodePudding user response：

thx all for the contribution, with search and tutorials figured out most of the things.

now one grey area remains, how to dynamically set the routes in the side menu bar using the role stores in vuex.