vue-element-template implements permission management, dynamic routing, and dynamic loading of sidebars

vue-element-template implements permission management, dynamic routing, and dynamic loading of sidebars

vue-element-template implements permission management, dynamic routing, and dynamic loading of sidebars

1. First download the template gitee.com/PanJiaChen/...

2. After the download is complete, open the vue.config.js file and comment out before: require('./mock/mock-server.js'), and close eslint

3. Open index.js under the router folder, delete redundant routes, and change it to this

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 <keep-alive> (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

4. Delete the form, nested, table, and tree folders in the views folder, empty the files in the api folder, and create a new index.js

5. Modify import {login, logout, getInfo} from'@/api/user' in store/modules/user.js, change user to index

6. Configure reverse proxy in vue.config.js

7. Then in the .env.deveplopment file, change VUE_APP_BASE_API ='/dev-api' to VUE_APP_BASE_API ='/api', then restart the project, otherwise it will not take effect. 8. Set the login interface and user acquisition in api/index.js Details and access to dynamic routing (sidebar) interface is configured

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',
    })
}

9. Modify import {login, logout, getInfo} from'@/api/index' in store/modules/user.js to import {login, DongtRouter, getInfo} from'@/api/index'

10. Modify config.headers['X-Token'] = getToken() in src/utils/request.js, change X-Token to the key value required by the backend, and change it to token, config according to the actual situation. .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
        }

The above piece of code is changed according to the actual situation, mainly to modify the code value. If the code success status value returned by the backend is 200, then change it to 200 here. if (res.code === 50008 || res.code === 50012 || res.code === 50014) here is also changed according to the actual situation according to the code returned by the backend, I haven't moved yet.