怎么将antdv pro的权限管理替换成自己的权限管理

[Light-yq]

我修改了src/permission.js文件 ` import router from './router' import store from './store' import storage from 'store' import NProgress from 'nprogress' // progress bar import '@/components/NProgress/nprogress.less' // progress bar custom style import { setDocumentTitle, domTitle } from '@/utils/domUtil' import { ACCESS_TOKEN } from '@/store/mutation-types' import { i18nRender } from '@/locales'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const allowList = ['login', 'register', 'registerResult'] // no redirect allowList const loginRoutePath = '/user/login' const defaultRoutePath = '/dashboard/workplace'

router.beforeEach((to, from, next) => { NProgress.start() // start progress bar to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(${i18nRender(to.meta.title)} - ${domTitle}) / has token / if (storage.get(ACCESS_TOKEN)) { if (to.path === loginRoutePath) { next({ path: defaultRoutePath }) NProgress.done() } else { store.dispatch('GenerateRoutes', { groupKey: 'leftMenu' }).then(() => { next() }) } } else { if (allowList.includes(to.name)) { // 在免登录名单，直接进入 next() } else { next({ path: loginRoutePath, query: { redirect: to.fullPath } }) NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it } } })

router.afterEach(() => { NProgress.done() // finish progress bar }) `

src/router/generator-routers.js文件 用来处理我们接口和官方的不同 export const generatorDynamicRouter = groupKey => { console.log(groupKey) return new Promise((resolve, reject) => { loginService .getCurrentUserNav(groupKey) .then(res => { console.log('generatorDynamicRouter response:', res) // const { result } = res // console.log(result, 123) const result = [] const leftMenuData = res.data.data leftMenuData.forEach(item => { result.push({ component: item.property.component, id: item.id, meta: { show: item.property.show, title: item.title, icon: item.icon }, name: item.actionKey, parentId: 0 }) }) const menuNav = [] const childrenNav = [] // 后端数据, 根级树数组, 根级 PID listToTree(result, childrenNav, 0) rootRouter.children = childrenNav console.log(rootRouter) menuNav.push(rootRouter) console.log('menuNav', menuNav) const routers = generator(menuNav) routers.push(notFoundRouter) console.log('routers', routers) resolve(routers) }) .catch(err => { reject(err) }) }) } 也根据官网进行修改了src/router/index.js ` // import Vue from 'vue' // import Router from 'vue-router' // import { constantRouterMap } from '@/config/router.config'

// // hack router push callback // const originalPush = Router.prototype.push // Router.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) // }

// Vue.use(Router)

// export default new Router({ // mode: 'history', // routes: constantRouterMap // })

import Vue from 'vue' import Router from 'vue-router' import { constantRouterMap, asyncRouterMap } from '@/config/router.config'

Vue.use(Router)

export default new Router({ mode: 'history', routes: constantRouterMap.concat(asyncRouterMap) }) 以及BasicLayout.vue import { asyncRouterMap } from '@/config/router.config.js' const routes = asyncRouterMap.find((item) => item.path === '/') // const routes = this.mainMenu.find(item => item.path === '/') ` 但是浏览器依然不能加载路由和菜单 我也查了路由表

显示路由是添加进去了 但是页面依然进入了404页面

[sendya]

https://pro.antdv.com/docs/authority-management

[sendya]

在前端的权限很简单，最核心的内容就是 vue-router 的 addRouter() 方法把你的有权限的路由 add 到路由表。其他内容都是业务内容，你自行根据业务处理即可