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

摘要：最终给前端返回的数据格式如下赛冷思内容管理其他字段文章管理文章列表文章详情随笔管理添加修改随笔大致思路就是这样，回头在实现的过程中发现不完善的，将会持续更新。最新更新在我的博客

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

原文在我博客

添加功能尽量让前端开发者填写，你懂得

修改时，前端一定要知道，你懂得

删除时，前端一定要知道，你懂得

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

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

pid 父级ID，根级ID为0，没啥说

path 默认为"0,",意思就把当前数据，从最顶层的父级pid到自身的pid，用英文","链接起来,最后要加个逗号

例如，文章管理自己的pid为1，它得父级内容管理的pid是0，所以文章管理的path就是"0,1,",一次类推就行

extra 前端路由的拓展信息

通过示例可以看出，该用户拥有的路由其实就三个页面，分别是：文章列表,文章查看和添加/修改随笔，注意：添加/修改随笔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
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ]
}

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

最新更新在我的博客：https://sailengsi.com/article/15