refactor(all): 完成项目的前后端逻辑分离，静态页面可以单独部署

pear_admin/apis/passport.py

@@ -1,16 +1,12 @@
 from collections import OrderedDict
 from copy import deepcopy
 
-from flask import Blueprint, make_response, redirect, request
+from flask import Blueprint, make_response, request
 from flask_jwt_extended import (
     create_access_token,
     create_refresh_token,
     get_current_user,
     jwt_required,
-    set_access_cookies,
-    set_refresh_cookies,
-    unset_access_cookies,
-    unset_refresh_cookies,
 )
 
 from pear_admin.extensions import db
@@ -35,10 +31,14 @@ def login_in():
     access_token = create_access_token(user)
     refresh_token = create_refresh_token(user)
 
-    response = make_response({"code": 0, "message": "登录成功"})
+    response = make_response(
-
+        {
-    set_access_cookies(response, access_token)
+            "code": 0,
-    set_refresh_cookies(response, refresh_token)
+            "message": "登录成功",
+            "access_token": access_token,
+            "refresh_token": refresh_token,
+        }
+    )
 
     return response
 
@@ -46,10 +46,7 @@ def login_in():
 @passport_api.route("/logout", methods=["GET", "POST"])
 @jwt_required()
 def logout():
-    response = make_response(redirect("/login"))
+    return {"msg": "退出登录成功", "code": 0}
-    unset_access_cookies(response)
-    unset_refresh_cookies(response)
-    return response
 
 
 @passport_api.get("/menu")

pear_admin/apis/role.py

@@ -1,5 +1,3 @@
-from copy import deepcopy
-
 from flask import Blueprint, request
 from flask_sqlalchemy.pagination import Pagination
 

pear_admin/apis/user.py

@@ -1,6 +1,7 @@
 from datetime import datetime
 
 from flask import Blueprint, request
+from flask_jwt_extended import current_user, jwt_required
 from flask_sqlalchemy.pagination import Pagination
 
 from pear_admin.extensions import db
@@ -89,3 +90,13 @@ def change_user_role(rid):
     user.role_list = [r[0] for r in role_obj_list]
     user.save()
     return {"code": 0, "message": "授权成功"}
+
+
+@user_api.get("/user/profile")
+@jwt_required()
+def user_profile():
+    return {
+        "code": 0,
+        "msg": "获取个人数据成功",
+        "data": current_user.json(),
+    }

pear_admin/extensions/init_jwt.py

@@ -19,9 +19,9 @@ def user_lookup_callback(_jwt_header, jwt_data):
 
 @jwt.expired_token_loader
 def expired_token_callback():
-    return redirect("/login")
+    return {"msg": "token 已过期，请重新登录", "code": -1}, 403
 
 
 @jwt.unauthorized_loader
 def missing_token_callback(error):
-    return redirect("/login")
+    return {"msg": "操作未授权，请重新登录", "code": -1}, 403

pear_admin/views/__init__.py

@@ -1,9 +1,9 @@
 from flask import Flask
 
 from .index import index_bp
-from .views import views_bp
+from .system import system_bp
 
 
 def register_views(app: Flask):
     app.register_blueprint(index_bp)
-    app.register_blueprint(views_bp)
+    app.register_blueprint(system_bp)

pear_admin/views/index.py

@@ -1,24 +1,21 @@
-from flask import Blueprint, render_template, send_from_directory
+from flask import Blueprint, render_template, send_file, send_from_directory
-from flask_jwt_extended import jwt_required
 
 index_bp = Blueprint("index", __name__)
 
 
 @index_bp.route("/")
-@jwt_required()
 def index():
-    return render_template("index.html")
+    return render_template("view/index.html")
 
 
-@index_bp.route("/login.html")
+@index_bp.route("/view/login.html")
-@index_bp.route("/login")
 def login():
-    return render_template("login.html")
+    return render_template("view/login.html")
 
 
-@index_bp.route("/register.html")
+@index_bp.route("/view/register.html")
 def register():
-    return render_template("register.html")
+    return render_template("view/register.html")
 
 
 @index_bp.route("/view/console/index.html")

pear_admin/views/system.py

@@ -0,0 +1,23 @@
+from flask import Blueprint, render_template
+
+system_bp = Blueprint("system", __name__)
+
+
+@system_bp.get("/system/<path1>/<path2>")
+def system_view(path1, path2):
+    return render_template(f"system/{path1}/{path2}")
+
+
+@system_bp.get("/views/role.html")
+def role_view():
+    return render_template("system/role/index.html")
+
+
+@system_bp.get("/views/department.html")
+def department_view():
+    return render_template("system/department/index.html")
+
+
+@system_bp.get("/views/user.html")
+def user_view():
+    return render_template("system/user/index.html")

pear_admin/views/views.py

@@ -1,33 +0,0 @@
-from flask import Blueprint, render_template
-
-views_bp = Blueprint("views", __name__)
-
-
-@views_bp.get("/views/rights")
-def rights_view():
-    return render_template("views/rights/index.html")
-
-
-@views_bp.get("/views/role")
-def role_view():
-    return render_template("views/role/index.html")
-
-
-@views_bp.get("/views/role_rights/<int:rid>")
-def role_rights_view(rid):
-    return render_template("views/role/role_rights.html", rid=rid)
-
-
-@views_bp.get("/views/user_role/<int:rid>")
-def user_role_view(rid):
-    return render_template("views/user/user_role.html", rid=rid)
-
-
-@views_bp.get("/views/department")
-def department_view():
-    return render_template("views/department/index.html")
-
-
-@views_bp.get("/views/user")
-def user_view():
-    return render_template("views/user/index.html")

static/data/ums_rights.csv

@@ -1,21 +1,21 @@
 id,name,code,type,url,icon_sign,status,sort,open_type,pid
 100,系统管理,ums:rights,menu,,layui-icon layui-icon-set-fill,,2,,0
-101,权限管理,ums:rights:list,path,/views/rights,layui-icon layui-icon-console,,1,,100
+101,权限管理,ums:rights:list,path,/system/rights/index.html,layui-icon layui-icon-console,,1,,100
 102,新增权限,ums:rights:create,auth,,,,0,,101
 103,修改权限,ums:rights:update,auth,,,,0,,101
 104,获取权限,ums:rights:read,auth,,,,0,,101
 105,删除权限,ums:rights:delete,auth,,,,0,,101
-106,角色管理,ums:role,path,/views/role,layui-icon layui-icon-console,,2,,100
+106,角色管理,ums:role,path,/system/role/index.html,layui-icon layui-icon-console,,2,,100
 107,新增角色,ums:role:create,auth,,,,0,,106
 109,修改角色,ums:role:update,auth,,,,0,,106
 108,查询角色,ums:role:read,auth,,,,0,,106
 110,删除角色,ums:role:delete,auth,,,,0,,106
-111,部门管理,ums:department,path,/views/department,layui-icon layui-icon-console,,3,,100
+111,部门管理,ums:department,path,/system/department/index.html,layui-icon layui-icon-console,,3,,100
 112,新建部门,ums:department:create,auth,,,,0,,111
 113,修改部门,ums:department:update,auth,,,,0,,111
 114,删除部门,ums:department:delete,auth,,,,0,,111
 115,查询部门,ums:department:read,auth,,,,0,,111
-116,用户管理,ums:user,path,/views/user,layui-icon layui-icon-console,,4,,100
+116,用户管理,ums:user,path,/system/user/index.html,layui-icon layui-icon-console,,4,,100
 117,新增用户,ums:user:create,auth,,,,0,,116
 118,修改用户,ums:user:update,auth,,,,0,,116
 119,查询用户,ums:user:read,auth,,,,0,,116

templates/system/role/index.html

@@ -136,11 +136,45 @@
         </button>
       </div>
     </script>
+
+    <!--授权表格-->
+    <form
+      class="layui-form"
+      action=""
+      style="display: none"
+      id="role-rights-form"
+      lay-filter="role-rights-form"
+    >
+      <div class="row" style="margin: 10px 5px">
+        <ul id="role_rights" class="dtree" data-id="0"></ul>
+      </div>
+      <div class="bottom">
+        <div class="button-container">
+          <button
+            type="submit"
+            class="layui-btn layui-btn-primary layui-btn-sm"
+            lay-submit
+            lay-filter="role-rights-save"
+          >
+            <i class="layui-icon layui-icon-ok"></i>
+            提交
+          </button>
+          <button type="reset" class="layui-btn layui-btn-sm">
+            <i class="layui-icon layui-icon-refresh"></i>
+            重置
+          </button>
+        </div>
+      </div>
+    </form>
+
     <script>
       layui.use(function () {
         var table = layui.table;
         var $ = layui.$;
         var form = layui.form;
+        let tree = layui.tree;
+
+        let role_id = -1;
 
         table.render({
           elem: "#role-table",
@@ -205,12 +239,35 @@
             });
           } else if (obj.event === "role-tool-detail") {
             //  角色授权 role-tool-detail
+            role_id = obj.data["id"];
+            $.ajax({
+              url: "/api/v1/rights?type=tree",
+              type: "get",
+              success: function (ret) {
+                // 渲染组件数据
+                tree.render({
+                  elem: "#role_rights",
+                  id: "role_rights",
+                  data: ret.data,
+                  showCheckbox: true,
+                });
+                // 获取需要授权角色的权限数据
+                $.ajax({
+                  url: `/api/v1/role/role_rights/${role_id}?type=tree`,
+                  type: "get",
+                  success: function (ret) {
+                    tree.setChecked("role_rights", ret.data);
+                  },
+                });
+              },
+            });
+
             layer.open({
-              type: 2,
+              type: 1,
               title: "授权",
-              shade: 0.1,
+              shade: false,
               area: ["500px", "500px"],
-              content: "/views/role_rights/" + obj.data["id"],
+              content: $("#role-rights-form"),
             });
           }
         });
@@ -243,6 +300,43 @@
           });
           return false;
         });
+
+        function get_id(list_tree_data) {
+          if (Array.isArray(list_tree_data)) {
+            let ret = [];
+            $.each(list_tree_data, function (index, item) {
+              if (item?.children) {
+                ret.push(...get_id(item.children));
+              }
+              ret.push(...get_id(item));
+            });
+            return ret;
+          } else {
+            return [list_tree_data.id];
+          }
+        }
+
+        form.on("submit(role-rights-save)", function (data) {
+          let param = tree.getChecked("role_rights"); // 获取选中节点的数据
+          let rights_ids = get_id(param).join();
+          $.ajax({
+            url: `/api/v1/role/role_rights/${role_id}`,
+            data: JSON.stringify({ rights_ids: rights_ids }),
+            dataType: "json",
+            contentType: "application/json",
+            type: "put",
+            success: function (result) {
+              if (result.code === 0) {
+                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
+                  layer.closeAll();
+                });
+              } else {
+                layer.msg(result.message, { icon: 2, time: 1000 });
+              }
+            },
+          });
+          return false;
+        });
       });
     </script>
   </body>

templates/system/user/index.html

@@ -150,12 +150,44 @@
         </button>
       </div>
     </script>
+
+    <!--用户授权标签-->
+    <form
+      class="layui-form"
+      action=""
+      id="user-role-form"
+      lay-filter="user-role-form"
+    >
+      <div class="row" style="margin: 10px 5px">
+        <ul id="user_role" class="dtree" data-id="0"></ul>
+      </div>
+      <div class="bottom">
+        <div class="button-container">
+          <button
+            type="submit"
+            class="layui-btn layui-btn-primary layui-btn-sm"
+            lay-submit=""
+            lay-filter="user-role-save"
+          >
+            <i class="layui-icon layui-icon-ok"></i>
+            提交
+          </button>
+          <button type="reset" class="layui-btn layui-btn-sm">
+            <i class="layui-icon layui-icon-refresh"></i>
+            重置
+          </button>
+        </div>
+      </div>
+    </form>
     <script>
       layui.use(function () {
         var table = layui.table;
         var $ = layui.$;
         var form = layui.form;
         var laydate = layui.laydate;
+        var tree = layui.tree;
+
+        let user_id = -1;
 
         table.render({
           elem: "#user-table",
@@ -220,13 +252,39 @@
               },
             });
           } else if (obj.event === "user-tool-detail") {
+            user_id = obj.data["id"];
+            $.ajax({
+              url: "/api/v1/role?type=tree",
+              type: "get",
+              success: function (ret) {
+                let data = [];
+                $.each(ret.data, function (index, item) {
+                  data.push({ id: item.id, title: item.name });
+                });
+                tree.render({
+                  elem: "#user_role",
+                  id: "user_role",
+                  data: data,
+                  showCheckbox: true,
+                });
+                // 请求获取当前用户的权限
+                $.ajax({
+                  url: `/api/v1/user/user_role/${user_id}`,
+                  type: "get",
+                  success: function (ret) {
+                    tree.setChecked("user_role", ret.data);
+                  },
+                });
+              },
+            });
             // 用户授权
             layer.open({
-              type: 2,
+              type: 1,
               title: "授权",
-              shade: 0.1,
+              shade: false,
               area: ["500px", "500px"],
-              content: "/views/user_role/" + obj.data["id"],
+              // content: "/views/user_role/" + obj.data["id"]
+              content: $("#user-role-form"),
             });
           }
         });
@@ -265,6 +323,43 @@
           elem: "#form_create_at",
           type: "datetime",
         });
+
+        function get_id(list_tree_data) {
+          if (Array.isArray(list_tree_data)) {
+            let ret = [];
+            $.each(list_tree_data, function (index, item) {
+              if (item?.children) {
+                ret.push(...get_id(item.children));
+              }
+              ret.push(...get_id(item));
+            });
+            return ret;
+          } else {
+            return [list_tree_data.id];
+          }
+        }
+
+        form.on("submit(user-role-save)", function (data) {
+          let param = tree.getChecked("user_role"); // 获取选中节点的数据
+          let rights_ids = get_id(param).join();
+          $.ajax({
+            url: `/api/v1/user/user_role/${user_id}`,
+            data: JSON.stringify({ rights_ids: rights_ids }),
+            dataType: "json",
+            contentType: "application/json",
+            type: "put",
+            success: function (result) {
+              if (result.code === 0) {
+                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
+                  layer.closeAll();
+                });
+              } else {
+                layer.msg(result.message, { icon: 2, time: 1000 });
+              }
+            },
+          });
+          return false;
+        });
       });
     </script>
   </body>

templates/view/index.html

@@ -120,13 +120,42 @@
         var admin = layui.admin;
         var popup = layui.popup;
 
+        // 请求后端，严重是否已经登录
+        fetch("/api/v1/user/profile", {
+          method: "GET",
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("access_token"),
+          },
+        })
+          .then((res) => res.json())
+          .then(function (data) {
+            if (data.code !== 0) {
+              location.href = "/view/login.html";
+            }
+          });
+
+        // 给 pear-admin-layui 的默认 ajax 请求添加权限
+        $.ajaxSetup({
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("access_token"),
+          },
+        });
+
         admin.setConfigurationPath("/static/config/pear.config.json");
 
         admin.render();
 
         admin.logout(function () {
           popup.success("注销成功", function () {
-            location.href = "/api/v1/logout";
+            fetch("/api/v1/logout")
+              .then((res) => res.json())
+              .then(function (data) {
+                if (data.code !== 0) {
+                  localStorage.removeItem("access_token");
+                  localStorage.removeItem("refresh_token");
+                  location.href = "/view/login.html";
+                }
+              });
           });
 
           // 清空 tabs 缓存

templates/view/login.html

@@ -94,7 +94,7 @@
                   </div>
                   <div class="other-login">
                     <div class="other-login-methods">其他方式</div>
-                    <a class="greenText" href="/register.html">注册账号</a>
+                    <a class="greenText" href="/view/register.html">注册账号</a>
                   </div>
                 </div>
               </div>
@@ -127,6 +127,8 @@
             data: JSON.stringify(data.field),
             contentType: "application/json",
             success: function (res) {
+              localStorage.setItem("access_token", res.access_token);
+              localStorage.setItem("refresh_token", res.refresh_token);
               btn.stop(function () {
                 popup.success("登录成功", function () {
                   location.href = "/";

templates/view/register.html

@@ -118,7 +118,7 @@
                   </div>
                   <div class="other-login">
                     <div class="other-login-methods">其他方式</div>
-                    <a class="greenText" href="/login.html">登录</a>
+                    <a class="greenText" href="/view/login.html">登录</a>
                   </div>
                 </div>
               </div>

templates/views/role/role_rights.html

@@ -1,109 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <title>角色管理</title>
-    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.dark.css" />
-    <link rel="stylesheet" href="/static/admin/css/variables.css" />
-    <link rel="stylesheet" href="/static/admin/css/reset.css" />
-    <!-- 依 赖 脚 本 -->
-    <script src="/static/component/layui/layui.js"></script>
-    <script src="/static/component/pear/pear.js"></script>
-    <script src="/static/js/pear_admin_flask.js"></script>
-  </head>
-  <body>
-    <div class="layui-panel">
-      <form class="layui-form" action="">
-        <div class="row" style="margin: 10px 5px">
-          <ul id="role_rights" class="dtree" data-id="0"></ul>
-        </div>
-        <div class="bottom">
-          <div class="button-container">
-            <button
-              type="submit"
-              class="layui-btn layui-btn-primary layui-btn-sm"
-              lay-submit=""
-              lay-filter="role-rights-save"
-            >
-              <i class="layui-icon layui-icon-ok"></i>
-              提交
-            </button>
-            <button type="reset" class="layui-btn layui-btn-sm">
-              <i class="layui-icon layui-icon-refresh"></i>
-              重置
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <script>
-      layui.use(function () {
-        let tree = layui.tree;
-        let form = layui.form;
-        let $ = layui.jquery;
-
-        function get_id(list_tree_data) {
-          if (Array.isArray(list_tree_data)) {
-            let ret = [];
-            $.each(list_tree_data, function (index, item) {
-              if (item?.children) {
-                ret.push(...get_id(item.children));
-              }
-              ret.push(...get_id(item));
-            });
-            return ret;
-          } else {
-            return [list_tree_data.id];
-          }
-        }
-
-        $.ajax({
-          url: "/api/v1/rights?type=tree",
-          type: "get",
-          success: function (ret) {
-            // 渲染组件数据
-            tree.render({
-              elem: "#role_rights",
-              id: "role_rights",
-              data: ret.data,
-              showCheckbox: true,
-            });
-            // 获取需要授权角色的权限数据
-            $.ajax({
-              url: "/api/v1/role/role_rights/{{ rid }}?type=tree",
-              type: "get",
-              success: function (ret) {
-                tree.setChecked("role_rights", ret.data);
-              },
-            });
-          },
-        });
-
-        form.on("submit(role-rights-save)", function (data) {
-          let param = tree.getChecked("role_rights"); // 获取选中节点的数据
-          let rights_ids = get_id(param).join();
-          $.ajax({
-            url: "/api/v1/role/role_rights/{{ rid }}",
-            data: JSON.stringify({ rights_ids: rights_ids }),
-            dataType: "json",
-            contentType: "application/json",
-            type: "put",
-            success: function (result) {
-              if (result.code === 0) {
-                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
-                  parent.layer.close(parent.layer.getFrameIndex(window.name));
-                });
-              } else {
-                layer.msg(result.message, { icon: 2, time: 1000 });
-              }
-            },
-          });
-          return false;
-        });
-      });
-    </script>
-  </body>
-</html>

templates/views/user/user_role.html

@@ -1,112 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <title>用户授权</title>
-    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.css" />
-    <link rel="stylesheet" href="/static/admin/css/admin.dark.css" />
-    <link rel="stylesheet" href="/static/admin/css/variables.css" />
-    <link rel="stylesheet" href="/static/admin/css/reset.css" />
-    <!-- 依 赖 脚 本 -->
-    <script src="/static/component/layui/layui.js"></script>
-    <script src="/static/component/pear/pear.js"></script>
-    <script src="/static/js/pear_admin_flask.js"></script>
-  </head>
-  <body>
-    <div class="layui-panel">
-      <form class="layui-form" action="">
-        <div class="row" style="margin: 10px 5px">
-          <ul id="user_role" class="dtree" data-id="0"></ul>
-        </div>
-        <div class="bottom">
-          <div class="button-container">
-            <button
-              type="submit"
-              class="layui-btn layui-btn-primary layui-btn-sm"
-              lay-submit=""
-              lay-filter="role-rights-save"
-            >
-              <i class="layui-icon layui-icon-ok"></i>
-              提交
-            </button>
-            <button type="reset" class="layui-btn layui-btn-sm">
-              <i class="layui-icon layui-icon-refresh"></i>
-              重置
-            </button>
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <script>
-      layui.use(function () {
-        let tree = layui.tree;
-        let form = layui.form;
-        let $ = layui.jquery;
-
-        $.ajax({
-          url: "/api/v1/role?type=tree",
-          type: "get",
-          success: function (ret) {
-            let data = [];
-            $.each(ret.data, function (index, item) {
-              data.push({ id: item.id, title: item.name });
-            });
-            tree.render({
-              elem: "#user_role",
-              id: "user_role",
-              data: data,
-              showCheckbox: true,
-            });
-            // 请求获取当前用户的权限
-            $.ajax({
-              url: "/api/v1/user/user_role/{{ rid }}",
-              type: "get",
-              success: function (ret) {
-                tree.setChecked("user_role", ret.data);
-              },
-            });
-          },
-        });
-
-        function get_id(list_tree_data) {
-          if (Array.isArray(list_tree_data)) {
-            let ret = [];
-            $.each(list_tree_data, function (index, item) {
-              if (item?.children) {
-                ret.push(...get_id(item.children));
-              }
-              ret.push(...get_id(item));
-            });
-            return ret;
-          } else {
-            return [list_tree_data.id];
-          }
-        }
-
-        form.on("submit(role-rights-save)", function (data) {
-          let param = tree.getChecked("user_role"); // 获取选中节点的数据
-          let rights_ids = get_id(param).join();
-          $.ajax({
-            url: "/api/v1/user/user_role/{{ rid }}",
-            data: JSON.stringify({ rights_ids: rights_ids }),
-            dataType: "json",
-            contentType: "application/json",
-            type: "put",
-            success: function (result) {
-              if (result.code === 0) {
-                layer.msg(result.message, { icon: 1, time: 1000 }, function () {
-                  parent.layer.close(parent.layer.getFrameIndex(window.name));
-                });
-              } else {
-                layer.msg(result.message, { icon: 2, time: 1000 });
-              }
-            },
-          });
-          return false;
-        });
-      });
-    </script>
-  </body>
-</html>