首先 要明白权限管理的究竟是要做什么,
说白了其实就是不同的管理员登录之后看到的页面是不一样
超级管理员往往权限很大很多功能都能看见和操作,包括用户的删除和增加
而普通的管理员往往只是具有查看功能
俩者登录之后要看到不一样的效果 这就是权限管理的最终样子
这个往往最直接的就是 管理系统左侧的菜单
超级管理员看到的菜单内容最丰富了,普通的用户就相对单调了些 我们权限管理就是根据这个菜单进行处理的
这样的话 我们先来说下思路
1.首先是路由我们不能再写死，像下面的的情况就是
import Home from "@/views/Home/Home.vue"
{
path:'/home',
name:'home',
component:Home // 或者使用懒加载 （）=> import("@/views/Home/Home.vue")
}
我们要实现路由的动态加载 而这个实现，往往要和后台配合好的
/Home/Home.vue 用户能看到那些组件的内容 后台应该根据前台 登陆的用户反馈给我们,而不是我们写死的
这个用户能看到什么界面 然后把这个界面的地址给我们,然后我们把界面地址拼接到前台路由上面 这样动态路由就实现了
有权限管理的系统往往后台是 应该单独会有一个权限管理的数据表
我这里先用假数据模拟一下 后台发来的数据
1.1.超级用户可以看到 首页和用户管理页和带有子菜单的菜单分类
{
code: 200,
msg:'ok'
data: {
menu: [
{
path: '/', // 首页的路由地址
name: 'home',
url: 'Home/Home.vue' // 这里是首页的 文件存储地址 这个就是我们要动态拼接到前台 用来路由加载使用
},
{
path: '/user',
name: 'user',
url: 'User/User.vue'
},
{
label: '其他',
icon: 'location',
children: [
{
path: '/page1',
name: 'page1',
url: 'Other/Page1.vue'
},
{
path: '/page2',
name: 'page2',
url: 'Other/Page2.vue'
}
]
]
}
}
}
// 普通用户只能看到首页
{
code: 200,
msg:'ok'
data: {
menu: [
{
path: '/',
name: 'home',
url: 'Home/Home.vue'
}
]
}
}
2.前台来处理 首先得用户登录 （省去了表单登录和数据的处理）
login() {
this.$http.post('api/User/permission/', this.form).then(res => {
if (res.code === 200) {
// 这里我使用了 vuex中的mutations 定义的方法这样可以让所有的组件都可以调用
this.$store.commit('addMenu', this.$router) // 将路由对象穿进去,之后将上面存入数据动态加载到路由中间
this.$router.push({ name: 'home' }) // 不管哪个用户登录 都会跳转到首页
}
})
}
2.将后台的返回的菜单数据 存入到vuex中 下面代码写在 /store/index.js
state:{
menu：[]
}
// 我把数据存储到了 cookie里面 防止 用户刷新之后 导致的vuex数据初始化
addMenu(state, router) {
if (!Cookie.get('menu')) {
return
}
let menu = JSON.parse(Cookie.get('menu'))
if (!menu) return
let currentMenu = [ // 路由的前面固定格式 提前先写好
{
path: '/',
component: () => import('@/views/Main'), // Main是后台的主入口文件，返回的路由数据要放到他的chidlren里面
children: [] // 是单页应用开发的 变得往往只是 右侧的那部分 数据
}
]
state.menu = menu // 将数据 存入到 state.menu 最后就是将这个 返回到前台 用来进行菜单展示
menu.forEach(item => {
if (item.children) { // 判断数据下面有没有子菜单 子菜单的单独处理
item.children = item.children.map(item => {
item.component = () => import(`@/views/${item.url}`) // 添加
return item
})
currentMenu[0].children.push(...item.children) // 有孩子的这里我用扩展运算符展开运算,最后还是以数组的单个元素形式存了进去
} else {
item.component = () => import(`@/views/${item.url}`) // 添加 路由 指向的是 当前项目下指定页面的地址
currentMenu[0].children.push(item) // 没有子菜单 直接push进去
}
})
router.addRoutes(currentMenu) // 使用 router.addRoutes() 方法 将处理好的路由对象 生成动态路由
}
最后还没完 就是 在用户每次刷新页面之后还是得执行一次这个方法
在main.js中
new Vue({
router,
store,
render: h => h(App),
created() {
store.commit('addMenu', router) // 每次刷新 触发一次 让用户菜单再重新生成一次
}
}).$mount('#app')
好了 暂时就是这些 这个是能实现的 后期我应该还是会更新的
