针对Vue的后台权限功能实现思路(持续更新)

权限是一块设计挺繁琐的功能,尤其是设计到前端SPA应用,前后端的耦合性太强,先屡屡思路,再实现,如果您有好的建议,也可评论留言。

基本的表结构如下

用户表。user

字段

说明

id

用户ID

username

用户名

示例

id

username

1

赛冷思

前端路由表。routes

字段

说明

id

路由自增ID

pid

父级路由ID,默认根路由为0

path

方便操作无线分类的关键字段,后面再说

web_pata

前端路由路径,注意:为方便各种SPA,前后不带斜杠,交给前端自己处理即可

name

路由名称

desc

路由描述

sort

排序,例如同一级路由,可按此字段排序,这个排序结果将会在前端菜单中提现

extra

拓展信息,格式为JSON字符串,例如vue-router中的meta信息

有几项需要注意:

  1. 添加功能尽量让前端开发者填写,你懂得
  2. 修改时,前端一定要知道,你懂得
  3. 删除时,前端一定要知道,你懂得

切记,这些东西都是跟前端相关联。。。

示例

id

pid

path

web_path

name

desc

sort

extra

1

0

0,

manager

内容管理

管理内容的路由

1

{}

2

1

0,1,

article

文章管理

文章管理

1

{}

3

2

0,1,2,

list

文章列表

查看文章列表页面

1

{}

4

2

0,1,2,

view

文章详情

查看文章详情页面

1

{}

5

2

0,1,2,

edit

添加/修改文章

添加和修改文章公用页面

1

{"test":"article-edit"}

6

1

0,1,

mind

随笔管理

随笔管理

1

{}

7

6

0,1,6,

list

随笔列表

查看随笔列表页面

1

{}

8

6

0,1,6,

view

随笔详情

查看随笔详情页面

1

{}

9

6

0,1,6,

edit

添加/修改随笔

添加和修改随笔公用页面

1

{"test":"mind-edit"}

注意:给用户选择路由时,如果选择的是最底层的路由,那么从它自身到最顶层父级,都应该被选择,例如选择文章列表,那么文章管理和内容管理都应该被选中。同样,如果选择的不是最底层的,那么所有的子级应该被选中,不再细说。 解释一下关键字段

  • pid 父级ID,根级ID为0,没啥说
  • path 默认为"0,",意思就把当前数据,从最顶层的父级pid到自身的pid,用英文","链接起来,最后要加个逗号 例如,文章管理自己的pid为1,它得父级内容管理的pid是0,所以文章管理的path就是"0,1,",一次类推就行
  • extra 前端路由的拓展信息

用户路由关联表。user_routes

字段

说明

id

自身自增ID

user_id

用户ID

route_id

路由ID

extra

拓展信息,格式为JSON字符串,例如vue-router中的meta信息,此拓展在将会和routes表extra合并,可以通过这个字段细粒度控制路由中的小操作

示例

id

user_id

route_id

extra

1

1

1

{}

2

1

2

{}

3

1

6

{}

4

1

3

{}

5

1

4

{}

6

1

9

{"add":true,"update":false}

通过示例可以看出,该用户拥有的路由其实就三个页面,分别是:文章列表,文章查看和添加/修改随笔,注意:添加/修改随笔extra里面设置了,add为true,update为false,意思是,只能添加,不能修改,前端可以在用户进入这个页面的时候,通过这个信息来决定到底能干啥,从而也就实现了细粒度控制每个页面的具体操作。

最终给前端返回的数据格式如下:

{
    id:1,
    username:'赛冷思',
    routes:[
        {
            id:1,
            web_path:'manager',
            name:'内容管理',
            extra:{},
            ...其他字段
            children:[
                {
                    id:2,
                    web_path:'article',
                    name:'文章管理',
                    extra:{},
                    children:[
                        {
                            id:3,
                            web_path:'list',
                            name:'文章列表',
                            extra:{},
                        },
                        {
                            id:4,
                            web_path:'view',
                            name:'文章详情',
                            extra:{},
                        }
                    ]
                },
                {
                    {
                        id:6,
                        web_path:'mind',
                        name:'随笔管理',
                        extra:{},
                        children:[
                            {
                                id:9,
                                web_path:'view',
                                name:'添加/修改随笔',
                                extra:{
                                    test:'mind-edit',
                                    add:true,
                                    update:false
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ]
}

大致思路就是这样,回头在实现的过程中发现不完善的,将会持续更新。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

Docsify 深入源码

文档站点一般作为各行各业领域内的知识技术介绍及使用的资料站点,可提高资料的使用效率,保证资料的质量。今天我们详细介绍下 docsify 的使用文档及实现原理。

3720
来自专栏.NET后端开发

如何通过经纬度获取地址信息?

摘要 Google Maps API Web Services,是一个为您的地图应用程序提供地理数据的 Google 服务的 HTTP 接口集合。具体包括:Go...

34911
来自专栏Kubernetes

Kubernetes集群安全配置

这两天在梳理Kubernetes集群的安全配置,涉及到各个组件的配置,最终决定画一个图来展现,应该会更清晰。 ? 涉及以下配置: 其他各个组件作为clien...

3046
来自专栏xingoo, 一个梦想做发明家的程序员

Structured Streaming教程(2) —— 常用输入与输出

Structured Streaming 提供了几种数据源的类型,可以方便的构造Steaming的DataFrame。默认提供下面几种类型:

850
来自专栏木子昭的博客

详解Django自定义过滤器

过滤器与函数 django过滤器的本质是函数,但"函数"太多了,为了显示自己的与众不同,设计者们想了个名字"过滤器"... django有一些内置的过滤器,但和...

3277
来自专栏有趣的Python

Python:Scrapy分布式爬虫打造搜索引擎集合篇 -(一)到(八)完整版Python分布式爬虫打造搜索引擎

Python分布式爬虫打造搜索引擎 基于Scrapy、Redis、elasticsearch和django打造一个完整的搜索引擎网站 本教程一共八章:从零开始...

8334
来自专栏刘望舒

Android系统启动流程(四)Launcher启动过程与系统启动流程

前言 此前的文章我们学习了init进程、Zygote进程和SyetemServer进程的启动过程,这一篇文章我们就来学习Android系统启动流程的最后一步:L...

1888
来自专栏Felix的技术分享

使用TraceView工具定位耗时操作

1274
来自专栏菩提树下的杨过

FluorineFx:远程共享对象(Remote SharedObjects)

单纯从客户端上来看,FluorineFx的RSO跟FMS中的RSO几乎没什么不同(参见Flash/Flex学习笔记(15):FMS 3.5之远程共享对象(Rem...

1796
来自专栏博客园

深入浅出话命令

WPF为我们准备了完善的命令系统,你可能会问:“有了路由事件为什么还需要命令系统呢?”。事件的作用是发布、传播一些消息,消息传达到了接收者,事件的指令也就算完成...

804

扫码关注云+社区