flask-xadmin自带后台登录界面、权限管理使用说明

Posted 2023-03-11

参考技术A flask-xadmin其实就是集成了Flask-Admin、Flask-SQLAlchemy、Flask-Security的扩展

使用说明：

1.安装

pip install Flask-Admin

pip install Flask-SQLAlchemy

pip install Flask-Security

pip install flask-xadmin

2.整合

可以参考作者在2016.12月写的例子

https://github.com/hexo-/flask-xadmin/blob/master/flask_xadmin/examples/simple.py

其中

classRole(db.Model,RoleMixin)以及ID, name and description字段是必须的，且doc="Full name"这种说明也不能少

和classUser(db.Model,UserMixin)以及id email password active字段是必须的，且doc="Full name"这种说明也不能少（参考 http://flask-security-zh-cn.readthedocs.io/zh_CN/latest/models.html）

app.config['SECURITY_PASSWORD_HASH']和app.config['SECURITY_PASSWORD_SALT']是必须的

password字段的长度不得低于120，User模型里的所有字段char长度之和不能超过1000

其他地方直接照搬例子即可。

其中要注意的是

views=[

myModelView(model=User,session=db.session,category='Entities'),

myModelView(model=Role,session=db.session,category='Entities'),

myModelView(model=Mydata,session=db.session,category='Entities'),

myFileAdmin(base_path='.',name="Files",category='Files']

需要修改，在category属性后面再添加endpoint属性，即：

views=[

myModelView(model=User,session=db.session,category='Entities',endpoint="User"),

myModelView(model=Role,session=db.session,category='Entities',endpoint="Role"),

myModelView(model=Mydata,session=db.session,category='Entities',endpoint="Mydata"),

myFileAdmin(base_path='.',name="Files",category='Files',endpoint="files")]

不然会报错蓝图重复错误：

AssertionError: A blueprint's name collision occurred between and . Both share the same name "workflow". Blueprints that are created on the fly need unique names.

后台管理系统的权限控制与管理

参考技术A 1.1 权限的分类
（1）后端权限
从根本上讲前端仅仅只是视图层的展示，权限的核心是在服务器中的数据变化，所以后端才是权限的概念，后端权限可以控制某个用户是否能够查询数据，是否能够修改数据等操作

在登录请求中，会得到权限数据，当然，这个需要后端返回数据的支持，前端根据权限数据，展示对应的菜单，点击菜单才能查看相关的界面

如果用户没有登录，手动在地址栏敲入管理界面地址，则需要跳转到登录页面
如果用户已经登录，如果手动敲入非权限内的地址，则需要跳转到404页面

在某个菜单的界面中，还得根据权限数据，展示出可以进行操作的按钮，比如，删除，修改，增加

如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成启用状态，此时发送的请求，也应该被前端所拦截

用户登录后服务器返回一个数据，这个数据有菜单列表和token，我们把这个数据放到 vuex 中，然后主页根据 vuex 中的数据进行菜单列表的渲染

问题：刷新界面 vuex 数据消失，菜单栏消失
解决：将数据存储在 sessionStorage 中，并让其和 vuex 中的数据保持同步

登录成功后，将token数据存储在 sessionStorage 中，判断其是否登录

问题：这样用户在登录之后就可以访问其他界面了，但如果用户A登录之后只能访问a页面，不能访问页面，但是这个时候还是可以通过地址栏输入进入到b页面
解决：当然我们也可以设置路由导航守卫，但是如果有多个页面，设置会非常不方便，并且对于A来说，它是不用访问b页面的，这时候我们何不对A不显示b页面，这个时候我们就用到了 动态路由

这样当用户A在地址栏输入自己不能访问的路由时，则不会跳转到该页面，会跳转到404页面
问题：如果我们重新刷新的话，动态路由就会消失，动态路由是登录成功之后才会调用的，刷新的时候并没有调用，所以动态路由并没有添加上
解决：可以在 app.vue 中的 created 中调用动态路由的方法

虽然用户可以看到某些界面了，但是这个界面的一些按钮该用户可能是没有权限的。因此，我们需要对组件中的一些按钮进行控制，用户不具备权限的按钮就隐藏或者禁用，而在这块的实现中个，可以把该逻辑放在自定义指令中
比如，我们可以根据后端返回的数据right来判断用户有什么权限

添加自定义指令
v-permission="action:'add',effect:'disavled'"
在permission.js中

（1）请求控制

（2）响应控制
得到了服务器返回的状态码是401，代表token超时或者被篡改了，此时应该强制跳转到登录界面

前端权限的实现之须要后端提供数据支持，否则无法实现。
返回的权限数据结构，前后端须要沟通协商怎样的数据使用起来才最方便