SpringBoot + Ant Design Pro Vue实现动态路由和菜单的前后端分离框架

 Ant Design Pro Vue默认路由和菜单配置是采用中心化的方式，在 router.config.js统一配置和管理，同时也提供了动态获取路由和菜单的解决方案，并将在2.0.3版本中提供，因到目前为止，官方发布的版本为2.0.2，所以本文结合官方提供的解决方案结合SpringBoot后台权限管理进行修改，搭建一套完整的SpringBoot +Vue前后端分离框架。
  项目具体代码示例可参看：
  github: GitHub - wmz1930/Jeebase: Jeebase是一款前后端分离的开源开发框架，基于springboot+vue（vue-element-admin/Ant Design Pro Vue）开发，一套SpringBoot后台，两套前端页面，可以自由选择基于ElementUI或者AntDesign的前端界面。二期会整合react前端框架（Ant Design React）。在实际应用中已经使用这套框架开发了CMS网站系统，社区论坛系统，微信小程序，微信服务号等，后面会逐步整理开源。 本项目主要目的在于整合主流技术框架，寻找应用最佳项目实践方案，实现可直接使用的快速开发框架。
  gitee: Jeebase: Jeebase是一款前后端分离的开源开发框架，基于springboot+vue（vue-element-admin/Ant Design Pro Vue）开发，一套SpringBoot后台，两套前端页面，可以自由选择基于ElementUI或者AntDesign的前端界面。二期会整合react前端框架（Ant Design React）。在实际应用中已经使用这套框架开发了CMS网站系统，社区论坛系统，微信小程序，微信服务号等，后面会逐步整理开源。 本项目主要目的在于整合主流技术框架，寻找应用最佳项目实践方案，实现可直接使用的快速开发框架。
  本项目主要目的在于整合主流技术框架，寻找应用最佳项目实践方案，实现可直接使用的快速开发框架。一套SpringBoot后台可以同时支持 ElementUI 和 Ant Design Pro Vue两套前端框架。

   一、Ant Design Pro Vue需要修改的几个文件：
    1. main.js 去掉mock // import './mock'
    2. request.js 修改请求参数
    3. store/permission.js 修改动态路由生成方法
    4. store/user.js 修改登录后获取菜单的处理
    5. login.js 修改登录请求
    6. Login.vue 修改登录页面参数并添加登录验证码
   备注：报错babel eslint TypeError: Cannot read property 'range' of null ，执行 cnpm i babel-eslint@7.2.3即可。
   二、下面详细介绍各模块修改，具体修改内容：
    1. main.js注释掉mock ，使其请求后台

import '@babel/polyfill'import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import { VueAxios } from './utils/request'// mock
// import './mock'      ---------这里注释掉import bootstrap from './core/bootstrap'
import './core/use'
import './permission' // permission control
import './utils/filter' // global filterVue.config.productionTip = false// mount axios Vue.$http and this.$http
Vue.use(VueAxios)new Vue({router,store,created () {bootstrap()},render: h => h(App)
}).$mount('#app')

    2. request.js 修改请求参数

import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import {VueAxios
} from './axios'
import notification from 'ant-design-vue/es/notification'
import {ACCESS_TOKEN
} from '@/store/mutation-types'// 创建 axios 实例
const service = axios.create({baseURL: 'http://127.0.0.1:8080/', // api base_urltimeout: 6000 // 请求超时时间
})const err = (error) => {if (error.response) {const data = error.response.dataconst token = Vue.ls.get(ACCESS_TOKEN)if (error.response.status === 403) {notification.error({message: 'Forbidden',description: data.message})}if (error.response.status === 401 && !(data.result && data.result.isLogin)) {notification.error({message: 'Unauthorized',description: 'Authorization verification failed'})if (token) {store.dispatch('Logout').then(() => {setTimeout(() => {window.location.reload()}, 1500)})}}}return Promise.reject(error)
}// request interceptor
service.interceptors.request.use(config => {const token = Vue.ls.get(ACCESS_TOKEN)if (token) {config.headers['Authorization'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改}return config
}, err)// response interceptor
service.interceptors.response.use((response) => {const res = response.dataif (res.code !== 200) {// 90000002：登录超时if (res.code === 90000002) {notification.error({message: '登录超时',description: '登录超时，请重新登录'})} else if (res.code === 10000007) { // 10000007：没有权限notification.error({message: '没有权限',description: '您没有权限执行此操作'})} else {notification.error({message: '操作失败',description: 'res.msg'})}return Promise.reject(new Error(res.message || 'Error'))} else {return response.data}
}, err)const installer = {vm: {},install (Vue) {Vue.use(VueAxios, service)}
}export {installer as VueAxios,service as axios
}

    3. store/permission.js 修改动态路由生成方法

import { asyncRouterMap, constantRouterMap } from '@/config/router.config'
import { RouteView } from '@/layouts'/*** 过滤账户是否拥有某一个权限，并将菜单从加载列表移除** @param permission* @param route* @returns {boolean}*/
function hasPermission (roles, route) {if (route.meta && route.meta.roles) {return roles.some(role => route.meta.roles.includes(role))} else {return true}
}/*** 单账户多角色时，使用该方法可过滤角色不存在的菜单** @param roles* @param route* @returns {*}*/
// eslint-disable-next-line
function hasRole(roles, route) {if (route.meta && route.meta.roles) {return route.meta.roles.includes(roles.id)} else {return true}
}function filterAsyncRouter (routerMap, roles) {const accessedRouters = routerMap.filter(route => {if (hasPermission(roles, route)) {if (route.children && route.children.length) {route.children = filterAsyncRouter(route.children, roles)}return true}return false})return accessedRouters
}
/*** 递归组装路由表，返回符合用户角色权限的路由表（路由表后台配置时使用）* add by jeebase* @param resources*/
function assembleAsyncRoutes (resources) {const accessedRouters = []resources.forEach(resource => {var route = {}if (resource.resourceUrl.indexOf('Layout') >= 0) {route = {path: '/' + resource.resourcePath,component: RouteView,redirect: '/' + resource.resourceUrl,name: resource.resourcePageName,meta: {title: resource.resourceName,icon: resource.resourceIcon}}} else if (resource.resourceUrl.indexOf('nested') >= 0 && resource.children && resource.children.length) { // 包含子菜单的二级以下菜单route = {path: '/' + resource.resourcePath,component: RouteView,redirect: '/' + resource.children[0].resourceUrl,name: resource.resourcePageName,meta: {title: resource.resourceName,noCache: !resource.resourceCache,icon: resource.resourceIcon},hidden: !resource.resourceShow}} else { // 最后一层菜单route = {path: '/' + resource.resourcePath,component: () => import(`@/views/${resource.resourceUrl}`),name: resource.resourcePageName,meta: {title: resource.resourceName,keepAlive: resource.resourceCache,icon: resource.resourceIcon},hidden: !resource.resourceShow}}if (resource.children && resource.children.length) {route.children = assembleAsyncRoutes(resource.children)}accessedRouters.push(route)})return accessedRouters
}const permission = {state: {routers: constantRouterMap,addRouters: []},mutations: {SET_ROUTERS: (state, routers) => {state.addRouters = routersstate.routers = constantRouterMap.concat(routers)}},actions: {GenerateRouters ({ commit }, roles) {return new Promise(resolve => {const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)commit('SET_ROUTERS', accessedRouters)resolve(accessedRouters)})},GenerateResourcesRouters ({ commit }, resources) { // add by jeebasereturn new Promise(resolve => {let accessedRoutersif (resources && resources.length > 0) {const basicMenus = asyncRouterMap.find(item => item.path === '/').childrenasyncRouterMap.find(item => item.path === '/').children = basicMenus.concat(assembleAsyncRoutes(resources))accessedRouters = asyncRouterMap} else {accessedRouters = filterAsyncRouter(asyncRouterMap, [])}accessedRouters.push({ path: '*', redirect: '/404', hidden: true })commit('SET_ROUTERS', accessedRouters)console.log(accessedRouters)resolve(accessedRouters)})}}
}export default permission

    4. store/user.js 修改登录后获取菜单的处理

import Vue from 'vue'
import { login, getInfo, logout } from '@/api/login'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { welcome } from '@/utils/util'const user = {state: {token: '',name: '',welcome: '',avatar: '',roles: [],info: {}},mutations: {SET_TOKEN: (state, token) => {state.token = token},SET_NAME: (state, { name, welcome }) => {state.name = namestate.welcome = welcome},SET_AVATAR: (state, avatar) => {state.avatar = avatar},SET_ROLES: (state, roles) => {state.roles = roles},SET_INFO: (state, info) => {state.info = info},SET_PERMISSIONS: (state, permissions) => {state.permissions = permissions}},actions: {// 登录Login ({ commit }, userInfo) {return new Promise((resolve, reject) => {login(userInfo).then(response => {const token = response.dataVue.ls.set(ACCESS_TOKEN, token, 7 * 24 * 60 * 60 * 1000)commit('SET_TOKEN', token)resolve()}).catch(error => {reject(error)})})},// 获取用户信息GetInfo ({ commit }) {return new Promise((resolve, reject) => {getInfo().then(response => {// const result = response.resultconst { data } = responseif (!data) {reject(new Error('Verification failed, please Login again.'))}const { roles, stringResources, userName, headImgUrl } = data// roles must be a non-empty arrayif (roles && roles.length > 0) {commit('SET_ROLES', roles)commit('SET_PERMISSIONS', stringResources)} else {reject(new Error('getInfo: roles must be a non-null array !'))}commit('SET_NAME', { name: userName, welcome: welcome() })commit('SET_AVATAR', headImgUrl)// commit('SET_INTRODUCTION', data)// if (result.role && result.role.permissions.length > 0) {//   const role = result.role//   role.permissions = result.role.permissions//   role.permissions.map(per => {//     if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {//       const action = per.actionEntitySet.map(action => { return action.action })//       per.actionList = action//     }//   })//   role.permissionList = role.permissions.map(permission => { return permission.permissionId })//   commit('SET_ROLES', result.role)commit('SET_INFO', data)// } else {//   reject(new Error('getInfo: roles must be a non-null array !'))// }// commit('SET_NAME', { name: result.name, welcome: welcome() })// commit('SET_AVATAR', result.avatar)resolve(data)}).catch(error => {reject(error)})})},// 登出Logout ({ commit, state }) {return new Promise((resolve) => {commit('SET_TOKEN', '')commit('SET_ROLES', [])commit('SET_PERMISSIONS', [])Vue.ls.remove(ACCESS_TOKEN)logout(state.token).then(() => {resolve()}).catch(() => {resolve()})})}}
}
export default user

    5. login.js 修改登录请求

import api from './index'
import { axios } from '@/utils/request'/*** login func* parameter: {*     username: '',*     password: '',*     remember_me: true,*     captcha: '12345'* }* @param parameter* @returns {*}*/
export function login (parameter) {return axios({url: '/auth/login',method: 'post',data: parameter})
}export function getSmsCaptcha (parameter) {return axios({url: api.SendSms,method: 'post',data: parameter})
}export function getInfo () {return axios({url: '/auth/user/info',method: 'get',headers: {'Content-Type': 'application/json;charset=UTF-8'}})
}export function logout () {return axios({url: '/auth/logout',method: 'post',headers: {'Content-Type': 'application/json;charset=UTF-8'}})
}/*** get user 2step code open?* @param parameter {*}*/
export function get2step (parameter) {return axios({url: api.twoStepCode,method: 'post',data: parameter})
}

    6. Login.vue 修改登录页面参数，并添加登录验证码

<template><div class="main"><a-formid="formLogin"class="user-layout-login"ref="formLogin":form="form"@submit="handleSubmit"><a-tabs:activeKey="customActiveKey":tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"@change="handleTabClick"><a-tab-pane key="tab1" tab="账号密码登录"><a-form-item><a-inputsize="large"type="text"placeholder="请输入帐户名或邮箱地址"v-decorator="['userAccount',{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}]"><a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/></a-input></a-form-item><a-form-item><a-inputsize="large"type="password"autocomplete="false"placeholder="请输入密码"v-decorator="['userPassword',{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}]"><a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/></a-input></a-form-item><a-row :gutter="0"><a-col :span="14"><a-form-item><a-inputv-decorator="['vcode', validatorRules.vcode]"size="large"type="text"placeholder="请输入验证码"><a-iconv-if="inputCodeContent == verifiedCode"slot="prefix"type="safety-certificate":style="{ fontSize: '20px', color: '#ffffff' }"/><a-iconv-elseslot="prefix"type="safety-certificate":style="{ fontSize: '20px',color: '#ffffff' }"/></a-input></a-form-item></a-col><a-col :span="10"><img :src="vcodeImg" class="v-code-img" @click="changeImgCode"></a-col></a-row></a-tab-pane><a-tab-pane key="tab2" tab="手机号登录"><a-form-item><a-input size="large" type="text" placeholder="手机号" v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]"><a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/></a-input></a-form-item><a-row :gutter="16"><a-col class="gutter-row" :span="16"><a-form-item><a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]"><a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/></a-input></a-form-item></a-col><a-col class="gutter-row" :span="8"><a-buttonclass="getCaptcha"tabindex="-1":disabled="state.smsSendBtn"@click.stop.prevent="getCaptcha"v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button></a-col></a-row></a-tab-pane></a-tabs><a-form-item><a-checkbox v-decorator="['rememberMe']">自动登录</a-checkbox><router-link:to="{ name: 'recover', params: { user: 'aaa'} }"class="forge-password"style="float: right;">忘记密码</router-link></a-form-item><a-form-item style="margin-top:24px"><a-buttonsize="large"type="primary"htmlType="submit"class="login-button":loading="state.loginBtn":disabled="state.loginBtn">确定</a-button></a-form-item><div class="user-login-other"><span>其他登录方式</span><a><a-icon class="item-icon" type="alipay-circle"></a-icon></a><a><a-icon class="item-icon" type="taobao-circle"></a-icon></a><a><a-icon class="item-icon" type="weibo-circle"></a-icon></a><router-link class="register" :to="{ name: 'register' }">注册账户</router-link></div></a-form><two-step-captchav-if="requiredTwoStepCaptcha":visible="stepCaptchaVisible"@success="stepCaptchaSuccess"@cancel="stepCaptchaCancel"></two-step-captcha></div>
</template><script>
import md5 from 'md5'
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { getSmsCaptcha } from '@/api/login'export default {components: {TwoStepCaptcha},data () {return {customActiveKey: 'tab1',loginBtn: false,// login type: 0 email, 1 username, 2 telephoneloginType: 0,requiredTwoStepCaptcha: false,stepCaptchaVisible: false,form: this.$form.createForm(this),state: {time: 60,loginBtn: false,// login type: 0 email, 1 username, 2 telephoneloginType: 0,smsSendBtn: false},validatorRules: {userAccount: {rules: [{ required: true, message: '请输入用户名!', validator: 'click' }]},userPassword: {rules: [{ required: true, message: '请输入密码!', validator: 'click' }]},mobile: { rules: [{ validator: this.validateMobile }] },vcode: { rule: [{ required: true, message: '请输入验证码!' }] },inputCode: {rules: [{ required: true, message: '请输入验证码!' },{ validator: this.validateInputCode }]}},vcodeImg: '',verifiedCode: '',inputCodeContent: '',inputCodeNull: true,verkey: ''}},created () {this.vcodeImg = this.imgCode()// get2step({ })//   .then(res => {//     this.requiredTwoStepCaptcha = res.result.stepCode//   })//   .catch(() => {//     this.requiredTwoStepCaptcha = false//   })// this.requiredTwoStepCaptcha = true},methods: {...mapActions(['Login', 'Logout']),// handlerhandleUsernameOrEmail (rule, value, callback) {const { state } = thisconst regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/if (regex.test(value)) {state.loginType = 0} else {state.loginType = 1}callback()},gRandom () {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)},guid () {this.verkey = (this.gRandom() + this.gRandom() + '-' + this.gRandom() + '-' + this.gRandom() + '-' + this.gRandom() + '-' + this.gRandom() + this.gRandom() + this.gRandom())console.log(this.verkey)return this.verkey},imgCode () {return 'http://127.0.0.1:8080/auth/vcode?codeKey=' + this.guid() + '&n=' + Math.random()},changeImgCode () {this.vcodeImg = this.imgCode()},handleTabClick (key) {this.customActiveKey = key// this.form.resetFields()},handleSubmit (e) {e.preventDefault()const {form: { validateFields },state,customActiveKey,Login,verkey} = thisconsole.log(verkey)state.loginBtn = trueconst validateFieldsKey = customActiveKey === 'tab1' ? ['userAccount', 'userPassword', 'vcode', 'verkey'] : ['mobile', 'captcha', 'vcode', 'verkey']validateFields(validateFieldsKey, { force: true }, (err, values) => {if (!err) {console.log('login form', values)const loginParams = { ...values }delete loginParams.userAccountloginParams[!state.loginType ? 'email' : 'userAccount'] = values.userAccountloginParams.password = md5(values.userPassword)loginParams.userPassword = values.userPasswordloginParams.vcode = values.vcodeloginParams.verkey = verkeyLogin(loginParams).then((res) => this.loginSuccess(res)).catch(err => this.requestFailed(err)).finally(() => {state.loginBtn = false})} else {setTimeout(() => {state.loginBtn = false}, 600)}})},getCaptcha (e) {e.preventDefault()const { form: { validateFields }, state } = thisvalidateFields(['mobile'], { force: true }, (err, values) => {if (!err) {state.smsSendBtn = trueconst interval = window.setInterval(() => {if (state.time-- <= 0) {state.time = 60state.smsSendBtn = falsewindow.clearInterval(interval)}}, 1000)const hide = this.$message.loading('验证码发送中..', 0)getSmsCaptcha({ mobile: values.mobile }).then(res => {setTimeout(hide, 2500)this.$notification['success']({message: '提示',description: '验证码获取成功，您的验证码为：' + res.result.captcha,duration: 8})}).catch(err => {setTimeout(hide, 1)clearInterval(interval)state.time = 60state.smsSendBtn = falsethis.requestFailed(err)})}})},stepCaptchaSuccess () {this.loginSuccess()},stepCaptchaCancel () {this.Logout().then(() => {this.loginBtn = falsethis.stepCaptchaVisible = false})},loginSuccess (res) {console.log(res)this.$router.push({ name: 'dashboard' })// 延迟 1 秒显示欢迎信息setTimeout(() => {this.$notification.success({message: '欢迎',description: `${timeFix()}，欢迎回来`})}, 1000)},requestFailed (err) {this.$notification['error']({message: '错误',description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',duration: 4})}}
}
</script><style lang="less" scoped>
.user-layout-login {label {font-size: 14px;}.getCaptcha {display: block;width: 100%;height: 40px;}.forge-password {font-size: 14px;}.v-code-img {height: 40px;float: right;margin-top: 2px;border-radius: 5px;cursor: pointer;opacity: 0.6;filter: alpha(opacity=60);}button.login-button {padding: 0 15px;font-size: 16px;height: 40px;width: 100%;}.user-login-other {text-align: left;margin-top: 24px;line-height: 22px;.item-icon {font-size: 24px;color: rgba(0, 0, 0, 0.2);margin-left: 16px;vertical-align: middle;cursor: pointer;transition: color 0.3s;&:hover {color: #1890ff;}}.register {float: right;}}
}
</style>