Vue-element-template implements permission management, dynamic routing, and dynamic loading of the sidebar

1. Download the template gitee.com/PanJiaChen/…

2. Once downloaded, open the vue. Config. js file and comment out before: require(‘./mock/mock-server.js’) and close esLint

3. Open the index.js folder in the router folder and delete unnecessary routes

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/** * Note: sub-menu only appear when route children.length >= 1 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html * * hidden: true if set true, item will not show in the sidebar(default is false) * alwaysShow: true if set true, will always show the root menu * if not set alwaysShow, when item has more than one children route, * it will becomes nested mode, otherwise not show the root menu * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb * name:'router-name' the name is used by 
      
        (must set!!!) * meta : { roles: ['admin','editor'] control the page roles (you can set multiple roles) title: 'title' the name show in sidebar and breadcrumb (recommend set) icon: 'svg-name'/'el-icon-x' the icon show in the sidebar breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) activeMenu: '/example/list' if set path, the sidebar will highlight the path you set } */
      

/** * constantRoutes * a base page that does not have permission requirements * all roles can be accessed */
export const constantRoutes = [{
        path: '/login'.component: () = > import('@/views/login/index'),
        hidden: true
    },


    {
        path: '/'.component: Layout,
        redirect: '/dashboard'.children: [{
            path: 'dashboard'.name: 'Dashboard'.component: () = > import('@/views/dashboard/index'),
            meta: { title: 'Dashboard'.icon: 'dashboard'}}}],]const createRouter = () = > new Router({
    // mode: 'history', // require service support
    scrollBehavior: () = > ({ y: 0 }),
    routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // reset router
}

export default router
Copy the code

4. Delete the form, table, and tree folders in the views folder, clear the files in the API folder, and create index.js

5. Import {login, logout, getInfo} from ‘@/ API /user’ in store/modules/user.js and change user to index

6. Configure the reverse proxy in vue.config.js

7. Change VUE_APP_BASE_API = ‘/dev-api’ to VUE_APP_BASE_API = ‘/ API ‘in.env.deveplopment, then restart the project, otherwise it will not take effect8. Configure the login interface and the get user details and Get dynamic routes (sidebar) interface in API /index.js

Import request from '@/utils/request' export function login(data) {return request({url: /admin/ API /login', method: 'post', data})} export function getInfo(data) {return request({url: '/admin/ API /boss/detail', method: 'POST ', data})} export function DongtRouter() {return request({url: `/aoaoe/api/getMoveRouter`, method: 'get', }) }Copy the code

Import {login, logout, getInfo} from ‘@/ API /index’; import {login, DongtRouter, getInfo } from ‘@/api/index’

SRC /utils/request.js config. Headers [‘ x-token ‘] = getToken(); config.headers[‘token’] = getToken()

if (res.code ! == 200) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }) // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { // to re-login MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => { store.dispatch('user/resetToken').then(() => { location.reload() }) }) } return Promise.reject(new Error(res.message || 'Error')) } else { return res }Copy the code

The above 👆 code is changed according to the actual situation, mainly to change the code value. If the code success status value returned by the back end is 200, then change it to 200. If (res. Code = = = 50008 | | res. Code = = = 50012 | | res. Code = = = 50014) here also according to the back-end return code according to the actual situation to change, at the moment, I did not move.