SpringBoot actual e-business project mall (30K + STAR) address: github.com/macrozheng/…

Abstract

Permission management is mainly reflected in the control of interface access permissions in the back-end project and menu access permissions in the front-end project. In “Hand on hand to teach you how to handle permission management, combined with Spring Security interface dynamic permission control!” We have realized the dynamic permission control of the back-end interface. Today we talk about how to combine Vue to realize the dynamic permission control of the menu.

The use of the technical

Mall-admin-web implements dynamic permission control of menus using two technologies, one is Vue Router and the other is Vuex. Let’s take a look at these two technologies.

Vue Router

Vue Router is the official route manager of vue.js. A route is a path that redirects us to a specific page when we visit a specific path. The route for our project is defined in the SRC /router/index.js file. For example, the route for our product list page is defined as follows.

So when we go to http://localhost:8090/#/pms/product, we are redirected to the product list page.

The left menu of our front end is generated according to the routing table defined in the Vue Router. To realize the dynamic menu display, you only need to realize the dynamic routing.

Vuex

Vuex is a state management mode developed specifically for vuue.js applications. It uses a centralized storage to manage the state of all components of the application. Vuex can be understood simply as a global state manager in which we can store some global state. When we display these states in multiple components, simply changing the state in any one of the components will change the state in the rest of the components based on Vue responsive rendering.

There are a few core concepts to understand in Vuex:

  • Store: A container that contains most of the application’s state;
  • State: The State stored in Store. Because a single State tree is used, that is, there is only one State stored in Vuex. When this State changes, the State in the components bound to it will change.
  • Getter: States derived from State, thought of as computed properties of State;
  • Mutation: a State change. The only way to change a State in Vuex is to commit Mutation;
  • Action: For submitting the Mutation Action to change the State in Vuex;
  • Module: a Module in Store that uses a single state tree so that all the states of an application are grouped into one large object. To solve these problems, Vuex allows us to split the Store into modules.

The core processes in Vuex are as follows:

Dynamic permission control for menus

Next, let’s talk about how to combine Vue Router and Vuex to realize dynamic permission control for menus.

First, we need to modify the routing table in SRC /router/index.js. Split the routing table into static routing tables that must be displayed and dynamic routing tables that can be displayed dynamically.

Then we need to add the SRC/store/modules/permission. The js file, in the store of Vuex add permissions associated state, such as the left side menu binding the routing table.

There is a core GenerateRoutes method that generates routes accessible to the current user. Our data parameter contains the menu information that the user can access. The detailed implementation process of the routers is as follows: Dynamic routes that can be accessed are screened from the menu and sorted. At last, state changes are submitted to Vuex to change the state of the routers.

The match between front-end routes and back-end menus is determined by route names and front-end menu names. For example, route names in the commodity list and front-end names stored in the UMs_menu table are as follows.

Next we need to modify the SRC /store/index.js file to add the status of the permission module to Vuex’s Store.

Then modify the SRC /store/getters. Js file to give the two states in the permission module individual names for easy access.

We also need to modify the SRC/views/layout/components/Sidebar/index. The vue files, will be on the left side of the menu component and Vuex stored in the routing state binding, so that when we have modified the Vuex, after the state of menu will be changed. MapGetters is a helper function that maps Getter properties in a Store to local computed properties.

Finally, after the user logs in successfully,use Store. dispatch(‘GenerateRoutes’, {menus,username}) to modify the route state stored in Vuex and pass in the menu information that can be accessed by the user.

Demonstration of permission management function

Specific reference: we heart and mind of the authority management function, this arrangement!

Project source code address

Github.com/macrozheng/…

The public,

Mall project full set of learning tutorials serialized, attention to the public number the first time access.