无缝使用vue-element-admin，动态路由

使用vue-admin-template-master修改，链接：https://github.com/PanJiaChen/vue-admin-template

vue-admin-template模板添加tagsview，链接：https://www.cnblogs.com/flypig666/p/11854538.html?tdsourcetag=s_pctim_aiomsg

 

修改.env.development

# base api
VUE_APP_BASE_API = '/'

 

修改.env.production

# base api
VUE_APP_BASE_API = '/'

 

修改.env.staging

# base api
VUE_APP_BASE_API = '/'

 

修改vue.config.js

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js')
    proxy: {
      '/': {
        target: 'http://127.0.0.1:80',
        // target: 'http://y15675u773.imwork.net',
        ws: false,
        secure: false,
        changOrigin: true
      }
    }
  },

 

 

修改/src/store/modules/user.js

login({ loginCode: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.access_token)
        // setToken(data.access_token)
        resolve()
      }).catch(error => {
        reject(error)
      })

getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      commit('SET_NAME', getCookie('user_name'))
      commit('SET_AVATAR', 'https://i.loli.net/2020/02/03/eBpAIf4z6Glhua9.gif')
      resolve()
    })
  },

 

 

修改/src/router/index.js

这里是路由配置，除了404和登录页面不需要的都可以删除了

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '仪表盘', icon: 'dashboard', affix: true }
    }]
  }

 

 

修改/src/api/user.js

import { getToken, removeToken, getCookie } from '@/utils/auth'
import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/api/v1/sysLogin',
    method: 'post',
    data
  })
}

export function getInfo(userId) {
  return request({
    url: '/api/v1/sysUser',
    method: 'get',
    params: { userId }
  })
}

export function logout() {
  return request({
    url: '/api/v1/sysLogout',
    method: 'get'
  })
}

 

增加/src/api/sys/sysMenu.js

import request from '@/utils/request'

export function sysTreeMenus() {
  return request({
    url: '/api/v1/sysTreeMenus',
    method: 'get'
  })
}

 

 

增加/src/store/modules/path.js

import { constantRoutes } from '@/router'
import Layout from '@/layout/index'
import { sysTreeMenus } from '@/api/sys/sysMenu'

/**
 * 后台查询的菜单数据拼装成路由格式的数据
 * @param routes
 */
export function generaMenu(data) {
  const menu = []
  data.filter(item => {
    if (item.childrenMenuList) {
      menu.push({
        path: item.path ? item.path : item.id + '_key',
        component: Layout,
        redirect: item.path,
        name: item.path ? item.path : item.id + '_key',
        meta: { title: item.name, icon: 'example' },
        children: generaMenu(item.childrenMenuList)
      })
    } else {
      const myComponent = item.path ? resolve => require.ensure([], () => {
        try {
          resolve(require('@/views' + item.path))
        } catch (err) {
          resolve(require('@/views/404'))
        }
      }) : Layout
      menu.push({
        path: item.path ? item.path : item.id + '_key',
        component: myComponent,
        children: [
          {
            path: item.path ? item.path : item.id + '_key',
            name: item.name,
            component: myComponent,
            meta: { title: item.name, icon: 'form' }
          }]
      })
    }
  })
  return menu.concat([{ path: '*', redirect: '/404', hidden: true }])
}

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }) {
    return new Promise(async resolve => {
      const menus = await sysTreeMenus()
        .then(val => (val.code === 0 && val.data) || [])
        .catch(() => [])
      const menuList = generaMenu(menus)
      commit('SET_ROUTES', menuList)
      resolve(menuList)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

 

 

修改/src/store/index

Modules里面增加path

import path from './modules/path'

 

 

修改/src/utils/auth.js 在里面增加

import Cookies from 'js-cookie'

const TokenKey = 'access_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function getCookie(Name) {
  return Cookies.get(Name)
}

export function setCookie(Name, Value) {
  return Cookies.set(Name, Value)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

 

 

修改/src/utils/request.js

response => {
    const res = response.data
    if (res.code === 10001) {
      Message({
        message: `${res.data.user_name}，欢迎回来`,
        type: 'success',
        duration: 5 * 1000
      })
      return res
    }

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 0) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      if (res.code === 40017) {
        store.dispatch('user/resetToken').then(() => {
          location.reload()
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },

 

修改/src/store/getters.js 在里面增加

routers: state => state.path.routes,

 

 

修改/src/permission.js

// get user info
await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('path/generateRoutes')
router.addRoutes(accessRoutes)
next({ ...to, replace: true })

修改/src/layout/components/Sidebar/index.vue

routes() {
  return this.$store.getters.routers
}