-
思路
- 后台根据接口返回id 自己在路由中配置相应的id
- 包括了按钮的权限
- 路由树结构的是 重新挂载
- 按钮根据v-if判断是否渲染
-
我是把方法 写在了vuex中
--store
--module
--user.js
- 后台返回的结构
- 这里是判断用户权限
getUserPermission ({ commit, state }, list) {
return new Promise((resolve, reject) => {
getUserPermission().then(res => {
const permissionList = res.data.accountList.map(x => x.permissionCode)
setCookie('permissionList', JSON.stringify(permissionList))
state.isGetRole = true
let target = []
target = list.filter(x => {
const index = res.data.menuList.findIndex(y => y.permissionCode === x.meta.id)
if (index > -1) {
x.children = x.children.filter(z => {
const index2 = res.data.menuList[index].permissionCodeResultList.findIndex(e => e.permissionCode === z.meta.id)
return index2 > -1
})
return true
} else {
return false
}
})
resolve(target)
})
})
},
- 在文件permission.js中判断路由在跳转之前对路由进行重新挂载
import router, { asyncRouter } from './router'
import store from './store'
router.beforeEach((to, from, next) => {
// 判断用户需不需要获取权限
if (store.state.user.isGetRole) {
// console.log(to.matched.length)
// 没有匹配到路由
if (to.matched.length === 0) {
const consoleURL = process.env.VUE_APP_7_OPEN
window.location.href = consoleURL + '/403'
} else {
next()
}
} else {
// 判断权限
store.dispatch('user/getAccountInfo').then(e => {
if (e.accountType.code === 0) {
// 主账号不需要权限
store.state.user.isGetRole = true
router.addRoutes(routers) // 动态添加可访问路由表
router.options.routes = router.options.routes.concat(routers)
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
} else {
store.dispatch('user/getUserPermission', asyncRouter).then(res => {
router.addRoutes(res) // 动态添加可访问路由表
router.options.routes = router.options.routes.concat(res)
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})
}
})
}
})
- 控制按钮的
<el-button v-if="permissionBtn('28')" size="medium">
<svg-icon icon-class="link" class="svg-link" />导出
</el-button>
Vue.prototype.permissionBtn = function (id) {
if (!id) return true
const permissionList = getCookie('permissionList') ? JSON.parse(getCookie('permissionList')) : []
if (store.state.user.userInfo.accountType && store.state.user.userInfo.accountType.code === 0) return true // 主账号
return permissionList.some(x => x === id)
}
路由表
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/index'
我们是把各个模块路由导出来了的
// import { homeRoute } from '@/views/home/router'
// import { opportunitiesRoute } from '@/views/opportunities/router'
// import { customerRoute } from '@/views/customer/router'
Vue.use(VueRouter)
// mark: true 此路由不受权限管理,慎重填写
export let asyncRouter = [
{
path: '/creation',
name: 'creation',
meta: { title: '内容创作', icon: 'indite-menu', code: '74' },
component: Layout,
children: questionnaire
},
{
path: '/marketing',
name: 'marketing',
meta: { title: '营销获客', icon: 'visitors-menu', code: '77' },
component: Layout,
// if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'pre') {
// children: live.concat(activity, exhibition, outlink, ziLiaoRoute)
children: live.concat(wxMarketing, activity, rootQrcodeRoute, posterRoute, exhibition, outlink, ziLiaoRoute, liveQrCodeRoute)
},
{
path: '/operating',
name: 'operating',
meta: { title: '运营中心', icon: 'operations-menu', code: '120' },
component: Layout,
children: tagRoute
},
{
path: '/customerManage',
name: 'customerManage',
meta: { title: '客户管理', icon: 'customer-menu', code: '136' },
component: Layout,
children: opportunitiesRoute.concat(customerRoute, orderFormRoute, officeRoute, commodityRoute, pageSettingRoute)
},
{
path: '/statistics',
name: 'statistics',
meta: { title: '统计分析', icon: 'statistics-menu', code: '223' },
component: Layout,
children: radarRoute
},
{
path: '/sysSetting',
name: 'sysSetting',
meta: { title: '系统设置', icon: 'setting-menu', code: '231' },
component: Layout,
children: memberRoute
}
]
export const routes = [
{
path: '/',
redirect: '/home/index',
hide: true,
mark: true
// full控制2级是否显示
// hide:true, hide控制一级是否隐藏 不写默认为false
},
{
path: '/home',
name: 'Home',
hide: true,
mark: true,
meta: { title: '首页', icon: 'home-menu' },
component: Layout,
children: [
{
path: 'index',
name: 'index',
hide: true,
mark: true,
meta: { title: '个人首页' },
component: () => import('@/views/home/page/index.vue')
}
]
},
{ path: '/403', component: () => import('@/views/403'), hide: true, mark: true }
]
asyncRouter = homeRoute.concat(asyncRouter, [{ path: '*', redirect: '/403', hide: true, mark: true }])
// 解决重复点击导航路由报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: routes
})
export default router