关于后台管理系统的路由权限的设计思路

发发牢骚
磕了一天的代码,总算是把这个后台管理系统的路由权限分配给搞出来了

额外添加了一下 这个是用egg框架 + mysql + redis 弄了个RPAC权限管控模板

关于数据库的设计

这边我的后端是用unicloud和它自带的mongodb数据库

我先设计了三张表,直接上数据图吧

  • 路由表
    字段如下懂得都懂!
    在这里插入图片描述
    在这里插入图片描述
    数据库的三个路由对应的是前端的三个动态路由
    在这里插入图片描述

  • 角色表
    在这里插入图片描述

  • 用户表

在这里插入图片描述
路由表需要按前端给的路由数据输入到后端
前端的路由表
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
添加角色的话选择权限分配就是按照路由表配置来勾选,我这边存入的到后端的数据是checkbox选择的节点
在这里插入图片描述
然后就是将后端给的路由表处理成组件数组
在这里插入图片描述
在这里插入图片描述

上面使用了addRoutes是官方提供的动态添加路由的方法,因为他不是响应式的 所以得在options.routes和 addRoutes方法一起使用
关于页面添加后刷新 变成404解决方案如下
from.name为null是刷新的时候会出现的

// 页面手动刷新触发
if(from.name===null){
  // 解决刷新动态路由页面的404问题
  next({path:to.redirectedFrom})
  return
}else{
  next()
}
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue后台管理系统路由权限控制,一般可以通过路由的元信息(meta)来实现。我们可以在路由配置中设置一个 meta 字段,用于存储当前路由权限信息。然后在进入每个路由之前,判断用户是否有访问该路由权限。 下面是一个简单的示例代码: ```javascript // 路由配置 const routes = [ { path: '/dashboard', name: 'dashboard', component: Dashboard, meta: { requiresAuth: true } // 需要登录才能访问 }, { path: '/users', name: 'users', component: Users, meta: { requiresAuth: true, requiresAdmin: true } // 需要管理员权限才能访问 }, { path: '/login', name: 'login', component: Login } ] // 路由守卫 router.beforeEach((to, from, next) => { const isLoggedIn = localStorage.getItem('isLoggedIn') // 判断用户是否已登录 const requiresAuth = to.matched.some(record => record.meta.requiresAuth) // 判断路由是否需要登录才能访问 const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin) // 判断路由是否需要管理员权限才能访问 if (requiresAuth && !isLoggedIn) { // 需要登录但未登录,跳转到登录页面 next('/login') } else if (requiresAdmin && !isAdmin) { // 需要管理员权限但非管理员,提示无权限 alert('无权限访问该页面') next(from) } else { // 正常跳转 next() } }) ``` 上述代码中,我们在路由配置中设置了 meta 字段,用于标记当前路由权限信息。然后在路由守卫中,获取当前路由的 meta 信息,并根据权限信息进行判断,决定是否允许用户访问该路由。 需要注意的是,上述代码只是一个简单的示例,实际的权限控制可能比这个更加复杂,需要根据具体情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值