c# 基于layui的通用后台管理系统_基于vueelementadmin开发后台管理系统（一）

基于vue-element-admin开发后台管理系统(一)

vue开发pc端项目，一般选择element组件库，原因就是element-ui相对成熟，拥有诸多开发所需要用到的组件，然而开发后台管理系统的话，就属vue-element-admin相对成熟了，涵盖了诸多知识点。可以从中学到很多知识。

git地址是vue-ellement-admin  框架文档

一系列文档地址为手摸手教你写代码

框架优点

1、递归菜单，实现多级子菜单

2、路由配置项多，拥有诸多功能，如缓存，隐藏，固定展示菜单页签，图标，标题 等

3、隐藏侧边栏，菜单页签，面包屑等功能齐全

4、包含诸多知识点及技术，技术含量高，值得学习

5、代码结构整洁，路由拦截等逻辑清晰

框架缺点

1、动态加载路由，但是路由非获取后渲染

2、角色写死在路由上

3、部分代码存在bug，需修改

4、路由权限校验是基于角色的，不够灵活

基于该框架优化权限校验思路

1. 去除路由配置角色属性

2. 固定路由有(登录页，404页，个人信息页)

3. 项目默认展示登录页

4. 登录成功获取用户菜单树，根据菜单树动态添加路由，进入个人信息页

将原先根据用户角色来获取菜单的活交给后端。后端通过用户拥有的角色(一个用户可以多个角色)，整合所有角色拥有的权限，然后返回菜单树。(超级管理员拥有所有权限)

5. 管理系统有系统管理，包含 用户管理(超级管理员能查看所有用户，其他用户只能查看到自己创建的角色)，角色管理(非超级管理员无法修改自身拥有的角色权限)，菜单管理(系统管理下的菜单不可删除，不可停用)

路由拦截逻辑

1. 获取token，查看是否有token

2. 存在token再判断访问的页面是不是登录页，是的话直接免登录进入项目根路径

3. 判断是否有用户信息，存在用户信息放行

4. 否则通过token获取用户信息(token，name，id，头像，菜单树，角色id数组等)，再动态加载路由，再重新走路由拦截

5. 无token则判断是不是白名单页面，是的话 放行，否则将访问的 url存放在登录页的 param参数

总结

这样思路明确，即可实现后台管理系统开发，后续讲代码实战