能否提供一套没有权限管理的模板？

Question

能否提供一套没有权限管理的模板？

Closed this issue 7 years ago · 25 comments

rainJohn commented 7 years ago

目前系统mock的数据，耦合了权限管理模块，如果系统不需要权限，这个系统就不支持了哦。而且权限要按照你mock的数据格式去设置了。

Answer 1 · 2019-02-18T08:22:13.000Z

你可以按照该图流程去掉进行校验的部分，并且主动添加所有菜单即可

所有菜单
src\components\page\GlobalLayout.vue
L79 添加
import { asyncRouterMap } from '@/config/router.config.js'

L122 修改

this.menus = asyncRouterMap.find((item) => item.path === '/').children
// this.menus = this.mainMenu.find((item) => item.path === '/').children

Answer 2 · 2019-02-18T09:37:58.000Z

谢谢sendya的回复，我现在卡在了去掉权限的地方，如下代码块所示，我应该怎样修改呢？自己服务器的api，没有GetInfo这个方法，也没有role相关信息：

src/permission.js

`router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar

if (Vue.ls.get(ACCESS_TOKEN)) {
/* has token */
if (to.path === '/user/login') {
next({ path: '/account/settings' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) {
store
.dispatch('GetInfo')
.then(res => {
const roles = res.result && res.result.role
store.dispatch('GenerateRoutes', { roles }).then(() => {
// 根据roles权限生成可访问的路由表
// 动态添加可访问路由表
router.addRoutes(store.getters.addRouters)
const redirect = decodeURIComponent(from.query.redirect || to.path)
if (to.path === redirect) {
// hack方法确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
next({ ...to, replace: true })
} else {
// 跳转到目的路由
next({ path: redirect })
}
})
})
.catch(() => {
notification.error({
message: '错误',
description: '请求用户信息失败，请重试'
})
store.dispatch('Logout').then(() => {
next({ path: '/user/login', query: { redirect: to.fullPath } })
})
})
} else {
next()
}
}
} else {
if (whiteList.includes(to.name)) {
// 在免登录白名单，直接进入
next()
} else {
next({ path: '/user/login', query: { redirect: to.fullPath } })
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
}
}
})src/store/modules/permission.js 这个文件应该怎样修改？const permission = {
state: {
routers: constantRouterMap,
addRouters: []
},
mutations: {
SET_ROUTERS: (state, routers) => {
state.addRouters = routers
state.routers = constantRouterMap.concat(routers)
}
},
actions: {
GenerateRoutes ({ commit }, data) {
return new Promise(resolve => {
// const { roles } = data
// const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
commit('SET_ROUTERS', asyncRouterMap)
resolve()
})
}
}
}
`

Answer 3 · 2019-02-18T10:02:02.000Z

文件 src/router/index.js#L11 改成这样

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',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap.concat(asyncRouterMap)
})

文件 src/main.js#L9 改成这样

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import { VueAxios } from '@/utils/request' // axios 不建议引入到 Vue 原型链上

import './core/use'
import bootstrap from './core/bootstrap'
// import '@/permission' // permission control
import '@/utils/filter' // global filter

Vue.config.productionTip = false

Vue.use(VueAxios, router)

new Vue({
  router,
  store,
  created () {
    bootstrap()
  },
  render: h => h(App)
}).$mount('#app')

文件 src\components\page\GlobalLayout.vue
L79 添加
import { asyncRouterMap } from '@/config/router.config.js'

L122 修改

this.menus = asyncRouterMap.find((item) => item.path === '/').children
// this.menus = this.mainMenu.find((item) => item.path === '/').children

Answer 4 · 2019-02-19T02:35:31.000Z

文件 src/router/index.js#L11 改成这样

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',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap.concat(asyncRouterMap)
})

文件 src/main.js#L9 改成这样

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import { VueAxios } from '@/utils/request' // axios 不建议引入到 Vue 原型链上

import './core/use'
import bootstrap from './core/bootstrap'
import '@/permission' // permission control
import '@/utils/filter' // global filter

Vue.config.productionTip = false

Vue.use(VueAxios, router)

new Vue({
  router,
  store,
  created () {
    bootstrap()
  },
  render: h => h(App)
}).$mount('#app')

文件 src\components\page\GlobalLayout.vue
L79 添加
import { asyncRouterMap } from '@/config/router.config.js'

L122 修改

this.menus = asyncRouterMap.find((item) => item.path === '/').children
// this.menus = this.mainMenu.find((item) => item.path === '/').children

您好，sendya，按照您的步骤，去掉了权限相关的验证了，非常感谢owner的帮忙哦.

顺便提一下，把下面的这段代码要注释掉修改为 next()。
file: src/permission.js
// if (store.getters.roles.length === 0) {
// store
// .dispatch('GetInfo')
// .then(res => {
// const roles = res.result && res.result.role
// store.dispatch('GenerateRoutes', { roles }).then(() => {
// // 根据roles权限生成可访问的路由表
// // 动态添加可访问路由表
// router.addRoutes(store.getters.addRouters)
// const redirect = decodeURIComponent(from.query.redirect || to.path)
// if (to.path === redirect) {
// // hack方法确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
// next({ ...to, replace: true })
// } else {
// // 跳转到目的路由
// next({ path: redirect })
// }
// })
// })
// .catch(() => {
// notification.error({
// message: '错误',
// description: '请求用户信息失败，请重试'
// })
// store.dispatch('Logout').then(() => {
// next({ path: '/user/login', query: { redirect: to.fullPath } })
// })
// })
// } else {
// next()
// }

Answer 5 · 2019-02-19T02:49:52.000Z

文件 src/router/index.js#L11 改成这样
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',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap.concat(asyncRouterMap)
})
文件 src/main.js#L9 改成这样
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import { VueAxios } from '@/utils/request' // axios 不建议引入到 Vue 原型链上

import './core/use'
import bootstrap from './core/bootstrap'
import '@/permission' // permission control
import '@/utils/filter' // global filter

Vue.config.productionTip = false

Vue.use(VueAxios, router)

new Vue({
  router,
  store,
  created () {
    bootstrap()
  },
  render: h => h(App)
}).$mount('#app')
文件 src\components\page\GlobalLayout.vue
L79 添加
import { asyncRouterMap } from '@/config/router.config.js'
L122 修改
this.menus = asyncRouterMap.find((item) => item.path === '/').children
// this.menus = this.mainMenu.find((item) => item.path === '/').children
您好，sendya，按照您的步骤，去掉了权限相关的验证了，非常感谢owner的帮忙哦.

顺便提一下，把下面的这段代码要注释掉修改为 next()。
file: src/permission.js
// if (store.getters.roles.length === 0) {
// store
// .dispatch('GetInfo')
// .then(res => {
// const roles = res.result && res.result.role
// store.dispatch('GenerateRoutes', { roles }).then(() => {
// // 根据roles权限生成可访问的路由表
// // 动态添加可访问路由表
// router.addRoutes(store.getters.addRouters)
// const redirect = decodeURIComponent(from.query.redirect || to.path)
// if (to.path === redirect) {
// // hack方法确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
// next({ ...to, replace: true })
// } else {
// // 跳转到目的路由
// next({ path: redirect })
// }
// })
// })
// .catch(() => {
// notification.error({
// message: '错误',
// description: '请求用户信息失败，请重试'
// })
// store.dispatch('Logout').then(() => {
// next({ path: '/user/login', query: { redirect: to.fullPath } })
// })
// })
// } else {
// next()
// }

直接不引入 permission.js 即可，不需要注释

Answer 6 · 2019-04-17T13:35:38.000Z

我想请问一下，我想实现的是用我后端的Shiro的权限验证，直接不使用前端的权限控制（两套维护起来很麻烦），现在按照上面的方法进行更改，现在我需要进行正常的登录，但是直接页面都没有了

Answer 7 · 2019-06-19T10:17:01.000Z

新版中找不到GlobalLayout.vue这个文件

Answer 8 · 2019-06-19T10:26:23.000Z

@wzw5566 https://pro.loacg.com/docs/remove-authority-management

Answer 9 · 2019-11-25T15:40:54.000Z

感谢owner大大
现在我遇到的麻烦是按照上面改过之后所有网页都不需要登录就可以访问了。如果我想单纯地保留token验证而去掉其他权限验证，该怎么修改呢？

Answer 10 · 2019-12-19T08:53:31.000Z

感谢owner大大
现在我遇到的麻烦是按照上面改过之后所有网页都不需要登录就可以访问了。如果我想单纯地保留token验证而去掉其他权限验证，该怎么修改呢？

我也遇到了这个问题，作为后端开发，真不明白为什么前端要搞的这么复杂。。。

Answer 11 · 2019-12-22T16:29:36.000Z

感谢owner大大
现在我遇到的麻烦是按照上面改过之后所有网页都不需要登录就可以访问了。如果我想单纯地保留token验证而去掉其他权限验证，该怎么修改呢？

我也遇到了这个问题，作为后端开发，真不明白为什么前端要搞的这么复杂。。。

我已经解决了这一块了，前面的步骤都是对的，但是要保留main.js里的第十五行permission检查
希望能帮到你

Answer 12 · 2020-08-04T09:42:09.000Z

请问你现在实现的流程有登陆吗，还是说项目打开就是首页

Answer 13 · 2020-08-04T09:46:35.000Z

请问你现在实现的流程有登陆吗，还是说项目打开就是首页

有登陆流程

Answer 14 · 2020-08-04T10:00:09.000Z

可以告知怎么实现吗

Answer 15 · 2020-08-04T10:08:59.000Z

按照上面给的案例方法是可以进入到首页的，但是菜单不显示

Answer 16 · 2020-08-04T10:26:54.000Z

菜单是指？

Answer 17 · 2020-08-04T10:31:33.000Z

可以加你微信或者qq吗我发截图给你

Answer 18 · 2020-08-04T10:33:46.000Z

你就直接在这发吧 p.s. 感觉你的问题描述不是很清楚以后可以参考这个：https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/master/README-zh_CN.md

Answer 19 · 2020-08-04T10:42:56.000Z

问题已解决,看了你发的对于如何提问的文章对我很有帮助,非常感谢

Answer 20 · 2020-08-04T10:44:02.000Z

好的继续加油吧

Answer 21 · 2020-08-15T01:53:52.000Z

/src/router/index.js 需要把asyncRouterMap,constantRouterMap合并到一块
import { constantRouterMap, asyncRouterMap } from '@/config/router.config'
Object.assign(asyncRouterMap,constantRouterMap)

Answer 22 · 2020-11-10T13:48:47.000Z

问题已解决，看了你发的关于如何提问的文章对我很有帮助，非常感谢

您好，方便问下是怎么解决的吗

Answer 23 · 2021-04-10T02:40:34.000Z

好的继续加油吧

老哥能交流下你是怎么改的吗?

Answer 24 · 2021-09-12T17:09:49.000Z

https://pro.antdv.com/docs/remove-authority-management
这套流程走完侧栏无法显示

Answer 25 · 2024-01-09T06:41:17.000Z

这里去掉权限后，如何把登录页直接屏蔽到，打开直接是dashboard页面