Introduction to the
Vue-element-admin is a back-end front-end solution based on VUE and Element-UI implementation. It uses the latest front-end technology stack, built-in I18 internationalization solution, dynamic routing, authorization verification, refining the typical business model, provides a wealth of functional components, it can help you quickly build enterprise-level product prototype in the background.
Project directory
├─ ├─ Public │ ├─ Favicon. Ico # Favicon icon │ ├─ Public │ Favicon │ ├─ Favicon │ ├─ Index.html # HTML Template ├─ SRC # Body Code │ ├─ API # XHR Request │ ├─ Assets # ├─ Components # Public Components │ ├─ Directive # Custom instruction │ ├── Filters # Filter │ ├─ ICONS # Global SVG Component │ ├─ lang # International I8N │ ├─ Layout # Global Layout │ ├─ Router # Route │ ├── Style # style │ ├─ Public Method │ ├── views # View page │ ├─ App.vue # ├─ ├─ ├─ ├.env.xxx # ├─ ├.js # ├─ ├.js # ├─ ├.js # ├─ ├.js # Eslint Config Item ├─.babelrc # babel-loader Config ├─.travis. Yml # Automated CI Config ├─ vue.config.js # vue-cli Config ├─ postcss.config.js └─ garbage └─ garbage # package.jsonCopy the code
The introduction
Because the company needs to develop a background system based on permission management recently, I found vue-element-admin star up to 62354 on Github, so I studied it
Git address
Click here
Permissions routing
1. router/index.js
2. permission.js
3. store/modules/permission.js
Copy the code
Dynamic routing
Obtain user permissions -> Obtain routes by user permissions -> Inject them into the routing table through addRoutes
Step 1: Route declaration
Router /index routes need to be split. In the past, all routes were initially injected into the routing table. Now, routes that do not need permission control are initially injected into the routing table, and routes requiring permission control are declared and thrown. After the user logs in, it is dynamically added.
ConstantRoutes Base routes
AsyncRoutes Asynchronous routing (permission control routing)
Permission.js Route guard
- First check whether to log in to the getToken method. If not, jump to the login page
- If the user has logged in, determine whether the user’s roles are available (roles stands for user permissions if the user and logins are available and dynamic routing has been injected)
- This section describes the situation in which you have logged in but do not obtain user rights and do not inject dynamic routes
Store. dispatch(‘user/getInfo’) will retrieve the user’s permissions using the login token and return roles for the user
The next step is to take roles to match the user can access the routing of below permission/generateRoutes matching corresponding relation to the router announcement of meta. Roles and user roles
Button permissions
Button permissions are implemented by using the directive custom directive
Get the user’s roles permission from store and determine if one of the items in the array passed in meets the requirement to display it otherwise remove the element with removeChild
Dynamic breadcrumbs
@components/Breadcrumb
Watch $router to get the hierarchy of the route (note that the meta. Breadcrumb is false)
Quick navigation TAB
1. layout/components/TagView/index.vue
2. store/modules/tagsView.js
Copy the code
Watch $Router is used primarily within the component
-
AddTags adds visitedViews in the store to record user submissions
-
AddCachedView this is the cache of the route. The previous record of the cache is retained when switching. view.meta.noCache
-
MoveToCurrentTag: Scroll to the corresponding route tag
Dynamically switch theme colors
1.@/components/ThemePicker
Copy the code
- Require (‘ elder-ui /package.json’).version Gets the elder-UI version number of the current project
- Run the getCSSString command to obtain the lib/theme-chalk/index.css command
- Use updateStyle to update the corresponding color
Please point out any wrong opinions