@scx-js/scx-admin 0.0.3

package/scx/scx-auth.js

@@ -0,0 +1,197 @@
+import {JsonVOError, ResponseNotOKError, ScxReq} from "@scx-js/scx-http";
+import {ScxAuthInfo} from "./scx-auth-info.js";
+import {inject} from "vue";
+import {ElMessage} from "element-plus";
+
+
+/**
+ *
+ * @type {string}
+ */
+const scxAuthKey = "scx-auth";
+
+/**
+ *
+ * @returns {ScxAuth}
+ */
+function useScxAuth() {
+    return inject(scxAuthKey);
+}
+
+
+class ScxAuth {
+
+    /**
+     * 获取 token 的标识字段
+     */
+    TOKEN_KEY = "S-Token";
+
+    /**
+     * 获取 设备 的标识字段
+     */
+    DEVICE_KEY = "S-Device";
+
+    DEVICE_TYPE = "ADMIN"; //WEBSITE 使用的是 cookie, ADMIN 使用的是 header
+
+    /**
+     * 用户信息
+     */
+    userInfo;
+
+    /**
+     * @type ScxReq
+     */
+    req;
+
+    /**
+     *
+     * @param {ScxAuthInfo} userInfo
+     * @param baseURL
+     */
+    constructor(userInfo, baseURL) {
+        this.userInfo = userInfo;
+        this.req = new ScxReq(baseURL);
+    }
+
+    infoApi() {
+        return "api/auth/info";
+    }
+
+    /**
+     * 重置用户信息
+     */
+    resetUserInfo() {
+        this.userInfo.reset();
+        this.userInfo.loginStatus = false;
+    }
+
+    /**
+     * 判断证书是否可用, 可用的同时会拉取用户信息
+     * @returns {Promise<unknown>}
+     */
+    tokenCanUse() {
+        return new Promise((resolve, reject) => {
+            this.req.get(this.infoApi(), null, {
+                headers: this.AuthHeaders(), responseType: "json",
+            }).then(res => {
+                this.userInfo.fill(res);
+                this.userInfo.loginStatus = true;
+                resolve(true);
+            }).catch(e => {
+                //在两种情况下 token 不可用 一种是接口返回信息有误 一种是 后台明确 401 错误
+                if (e instanceof JsonVOError || (e instanceof ResponseNotOKError && e.cause.status === 401)) {
+                    resolve(false);
+                } else {//这里可能是网络无法连接等 直接抛异常即可
+                    //todo 此处因为目前只是抛出异常 所以当后台未启动时 前台也无法正确显示
+                    //todo 这里有几种方案 第一种就是这个 tokenCanUse 状态改为3种 明确可用 明确不可用 以及未知(比如后台连接不上)
+                    // todo 明确可用就是正常走路由 明确不可用就是跳转到登录界面 未知的情况下同样也跳转到登录界面 但是 不清空用户 token
+                    //todo 这样下次用户刷新页面仍然可以直接进入
+                    // reject(e);
+                    ElMessage.error("Api 连接错误 !!!");
+                    resolve(false);
+                }
+            });
+        });
+    }
+
+    login(username, password) {
+        return new Promise((resolve, reject) => {
+            //通知服务器退出登录
+            this.req.post("api/auth/login", {
+                username: username.trim(),
+                password: password,
+            }).then(data => {
+                this.setToken(data.token);
+                resolve(data.token);
+            }).catch(error => {
+                reject(error);
+            });
+        });
+    }
+
+    logout() {
+        return new Promise((resolve, reject) => {
+            //通知后台退出登录
+            this.req.post("api/auth/logout", null, {
+                headers: this.AuthHeaders(), responseType: "json",
+            }).then(() => {
+                //成功后清除 token 和 用户信息
+                this.removeToken();
+                this.resetUserInfo();
+                resolve();
+            }).catch(e => {
+                //在两种情况下 token 不可用 一种是接口返回信息有误 一种是 后台明确 401 错误
+                if (e instanceof JsonVOError || (e instanceof ResponseNotOKError && e.cause.status === 401)) {
+                    resolve(false);
+                } else {//这里可能是网络无法连接等 直接抛异常即可
+                    reject(e);
+                }
+            });
+        });
+    }
+
+    /**
+     * 用户是否已经登录
+     * @returns {boolean}
+     */
+    alreadyLogged() {
+        return this.userInfo.loginStatus === true;
+    }
+
+    /**
+     * 获取 token
+     * @returns {string}
+     */
+    getToken() {
+        try {
+            return localStorage.getItem(this.TOKEN_KEY);
+        } catch (e) {
+            console.error(e);
+            return "";
+        }
+    }
+
+    /**
+     * 设置 token
+     * @param token
+     */
+    setToken(token) {
+        try {
+            localStorage.setItem(this.TOKEN_KEY, token);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    /**
+     * 移除 token
+     */
+    removeToken() {
+        try {
+            localStorage.removeItem(this.TOKEN_KEY);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    /**
+     * 常用的 请求头
+     * @returns {{}}
+     */
+    AuthHeaders() {
+        const authHeaders = {};
+        authHeaders[this.TOKEN_KEY] = this.getToken();
+        authHeaders[this.DEVICE_KEY] = this.DEVICE_TYPE;
+        return authHeaders;
+    }
+
+    install(app) {
+        app.provide(scxAuthKey, this);
+    }
+
+}
+
+export {
+    ScxAuth,
+    useScxAuth,
+};

package/scx/scx-config-manager.js

@@ -0,0 +1,105 @@
+import {inject} from "vue";
+
+/**
+ *
+ * @type {string}
+ */
+const scxSystemConfigKey = "scx-system-config";
+
+/**
+ *
+ * @type {string}
+ */
+const scxUserConfigKey = "scx-user-config";
+
+/**
+ * a
+ * @type {string}
+ */
+const scxConfigManagerKey = "scx-config-manager";
+
+
+/**
+ * 配置管理器
+ */
+class ScxConfigManager {
+
+    req;
+
+    systemConfig;
+
+    userConfig;
+
+    /**
+     *
+     * @param req {ScxReq}
+
+     * @param systemConfig {Object}
+     * @param userConfig {Object}
+     */
+    constructor(req, systemConfig, userConfig) {
+        this.req = req;
+        this.systemConfig = systemConfig;
+        this.userConfig = userConfig;
+    }
+
+    startWatch() {
+        return this;
+    }
+
+    onSystemConfigChange(event) {
+        return this;
+    }
+
+    onUserConfigChange(event) {
+        return this;
+    }
+
+    updateSystemConfig(newSystemConfig) {
+        return this.req.put("api/system-config", newSystemConfig);
+    }
+
+    updateUserConfig(newUserConfig) {
+        return this.req.put("api/user-config", newUserConfig);
+    }
+
+    install(app) {
+        app.provide(scxConfigManagerKey, this);
+        app.provide(scxSystemConfigKey, this.systemConfig);
+        app.provide(scxUserConfigKey, this.userConfig);
+    }
+
+}
+
+
+/**
+ *
+ * @returns {Object}
+ */
+function useScxSystemConfig() {
+    return inject(scxSystemConfigKey);
+}
+
+/**
+ *
+ * @returns {Object}
+ */
+function useScxUserConfig() {
+    return inject(scxUserConfigKey);
+}
+
+
+/**
+ *
+ * @return {ScxConfigManager}
+ */
+function useScxConfigManager() {
+    return inject(scxConfigManagerKey);
+}
+
+export {
+    ScxConfigManager,
+    useScxSystemConfig,
+    useScxUserConfig,
+    useScxConfigManager,
+};

package/scx/scx-router.js

@@ -0,0 +1,273 @@
+import NProgress from "nprogress";
+import {createRouter, createWebHashHistory} from "vue-router";
+import {inject} from "vue";
+
+/**
+ * 获取路由 title
+ * @param route
+ * @returns {String}
+ */
+function getRouteTitle(route) {
+    return route.meta && route.meta.title ? route.meta.title : route.name;
+}
+
+/**
+ * 获取路由 排序
+ * @param route
+ * @return {Number}
+ */
+function getRouteOrder(route) {
+    return route.meta && route.meta.order ? route.meta.order : 0;
+}
+
+/**
+ *  是否需要登录
+ *  @param route
+ * @return {boolean}
+ */
+function routeNoNeedLogin(route) {
+    return route.meta && route.meta.noNeedLogin === true;
+}
+
+/**
+ *  是否需要权限
+ * @param route
+ * @return {boolean}
+ */
+function routeNoNeedPerm(route) {
+    return route.meta && route.meta.noNeedPerm === true;
+}
+
+/**
+ *  是否可以在启动器中访问 1, 是最终节点(没有 children) 2, 没有开启 hiddenInLauncher
+ *  @param route
+ * @return {boolean}
+ */
+function routeCanShowInLauncher(route) {
+    return route.children.length === 0 && !(route.meta && route.meta.hiddenInLauncher === true);
+}
+
+function routeCanShowInMenu(route) {
+    return !(route.meta && route.meta.hiddenInLauncher === true);
+}
+
+function sortRoutes(l) {
+    return l.sort((v1, v2) => getRouteOrder(v1) - getRouteOrder(v2));
+}
+
+
+/**
+ * 为路由设置 order
+ * @param r
+ */
+function setRoutesOrder(r) {
+    let i = 0;
+
+    function setRoutesOrder0(r0) {
+        for (let e of r0) {
+            if (!e.meta) {
+                e.meta = {};
+            }
+            e.meta.order = i;
+            i = i + 1;
+            if (e.children) {
+                setRoutesOrder0(e.children);
+            }
+        }
+    }
+
+    setRoutesOrder0(r);
+    return r;
+}
+
+class ScxRouter {
+    auth;
+
+    /**
+     * @type {Object}
+     */
+    systemConfig;
+
+    /**
+     * @type {Object}
+     */
+    userConfig;
+    userInfo;
+    vueRouter;
+
+    constructor(rawOptions = {}) {
+        const {
+            routes = [],
+            auth,
+            systemConfig,
+            userInfo,
+            userConfig,
+        } = rawOptions;
+
+        this.auth = auth;
+        this.systemConfig = systemConfig;
+        this.userInfo = userInfo;
+        this.userConfig = userConfig;
+        this.vueRouter = createRouter({
+            history: this.historyType(),
+            routes: setRoutesOrder(routes),
+        });
+        this.initBeforeEach(this.vueRouter);
+        this.initAfterEach(this.vueRouter);
+    }
+
+    initBeforeEach(vueRouter) {
+        vueRouter.beforeEach(async (to, from) => {
+            NProgress.start();
+            document.title = this.getPageTitle(to);
+
+            //先校验用户是否登录或令牌是否可用 (若用户已经登录直接放行, 如果没登陆可能是第一次进入页面, 则校验一下 token)
+            //此处可能会出现用户 "登录" 了但是 token 已经在后台作废 不过不用担心 因为后台数据的操作都已经做了登录校验 所以此种情况下用户只能看到空白页面而已
+            //至于为什么不每次都单独使用 tokenCanUse 作为判断依据而是添加了 alreadyLogged 作为辅助校验项 主要是从性能考虑
+            //毕竟每次切换页面都进行一次 token 是否可用的校验 (会走一次 http 请求) 对性能有很大影响
+            const b = this.auth.alreadyLogged() ? true : await this.auth.tokenCanUse();
+
+            if (b) {
+                if (to.name === "login") {//针对 login 页面做特殊处理
+                    return this.getRedirectRouteFromLoginRoute(to);
+                }
+                //不在白名单的判断是否有权限访问 没有返回 无权限页面
+                if (this.canAccessThisRoute(to)) {
+                    return true;
+                }
+                return routeNoNeedPerm(to) ? true : this.getNoPermRoute();
+            } else {//token 不可用移除 失效的token 并清除用户信息
+                //todo 因为已经失效 移不移除 应该没啥区别 this.auth.removeToken();
+                this.auth.resetUserInfo();
+                if (to.name === "login") { //针对 login 页面做特殊处理 防止无限重定向
+                    return true;
+                }
+                return routeNoNeedLogin(to) ? true : this.getLoginRoute(to);
+            }
+        });
+    }
+
+    initAfterEach(vueRouter) {
+        vueRouter.afterEach((to, from) => {
+            NProgress.done();
+        });
+    }
+
+    historyType() {
+        return createWebHashHistory();
+    }
+
+    getVueRouter() {
+        return this.vueRouter;
+    }
+
+    /**
+     *翻译 顶部的 title
+     * @param route
+     */
+    getPageTitle(route) {
+        return `${getRouteTitle(route)} - ${this.systemConfig.title}`;
+    }
+
+    /**
+     * 是否可以访问这个路由
+     * @returns {boolean}
+     * @param route
+     */
+    canAccessThisRoute(route) {
+        //先校验是否存在于白名单中
+        const onWhiteList = routeNoNeedLogin(route) || routeNoNeedPerm(route);
+        if (onWhiteList) {
+            return true;
+        }
+        if (this.userInfo.user.isAdmin) {
+            return true;
+        } else {
+            return this.userInfo.perms.pagePerms.includes(route.name);
+        }
+    }
+
+    /**
+     * 根据当前路由 获取登录页面的路由 主要是对参数进行了一些特殊处理 保证可以在登陆时直接重定向到登录前的页面
+     */
+    getLoginRoute({name, query} = {}) {
+        const loginQuery = {};
+        if (name) {
+            loginQuery["redirect-name"] = name;
+        }
+        if (query && Object.keys(query).length > 0) {
+            loginQuery["redirect-query"] = JSON.stringify(query);
+        }
+        return {name: "login", query: loginQuery};
+    }
+
+    getNoPermRoute() {
+        return {name: "no-perm"};
+    }
+
+    /**
+     * 解析 getLoginRoute 生成的 登录页面的路由 并返回应该重定向的页面
+     * 1, 没有重定向参数 -> 返回 home 页
+     * 2, 有重定向参数 但是参数有误 (无此路由) -> 返回 not-found 页
+     * 3, 有重定向页并且参数正确 -> 重定向到正确的页面并携带参数
+     * @param query
+     * @returns {{query: null, name: string}}
+     */
+    getRedirectRouteFromLoginRoute({query}) {
+        const queryRedirectName = query["redirect-name"];
+        const queryRedirectQuery = query["redirect-query"];
+        let redirectName = "home";
+        let redirectQuery = null;
+        if (queryRedirectName) {
+            if (this.vueRouter.hasRoute(queryRedirectName)) {
+                redirectName = queryRedirectName;
+                if (queryRedirectQuery) {
+                    try {
+                        redirectQuery = JSON.parse(queryRedirectQuery);
+                    } catch (e) {
+                        console.warn("处理重定向参数时发生错误 :　" + e);
+                    }
+                }
+            } else {
+                redirectName = "not-found";
+            }
+        }
+        return {name: redirectName, query: redirectQuery};
+    }
+
+    getRoutes() {
+        return sortRoutes(this.vueRouter.getRoutes());
+    }
+
+    install(app) {
+        app.provide(scxRouterKey, this);
+    }
+
+}
+
+/**
+ *
+ * @type {string}
+ */
+const scxRouterKey = "scx-router";
+
+/**
+ *
+ * @returns {ScxRouter}
+ */
+function useScxRouter() {
+    return inject(scxRouterKey);
+}
+
+export {
+    ScxRouter,
+    useScxRouter,
+    getRouteTitle,
+    getRouteOrder,
+    routeNoNeedLogin,
+    routeNoNeedPerm,
+    routeCanShowInLauncher,
+    routeCanShowInMenu,
+    sortRoutes,
+    setRoutesOrder,
+};

package/styles/index.css

@@ -0,0 +1,37 @@
+/*-------------------- 以下为一些其余的 css --------------------*/
+
+#nprogress {
+    --nprogress-color: var(--scx-theme);
+}
+
+/*添加修改页面的 label 使其变粗*/
+.crud .el-form-item__label {
+    font-weight: 700;
+}
+
+/*在 el 按钮中的图标颜色取按钮文字颜色 */
+.el-button .scx-icon {
+    fill: currentColor;
+}
+
+/*在 el 按钮中 当 scx-icon 和 span 处在一起时 增加两者的间距*/
+.el-button [class*=scx-icon] + span {
+    margin-left: 6px;
+}
+
+/* 定义一些其他的样式 */
+.el-scrollbar__thumb {
+    --el-scrollbar-opacity: 1;
+    --el-scrollbar-bg-color: var(--scx-scrollbar-thumb-bg);
+    --el-scrollbar-hover-opacity: 1;
+    --el-scrollbar-hover-bg-color: var(--scx-scrollbar-thumb-hover-bg);
+}
+
+/*todo element plus 默认 为 span 这里特殊处理让其撑满横向宽度 */
+.el-tree-node__label {
+    width: 100%;
+}
+
+.el-form-item__content {
+    min-width: 180px;
+}