【pure-admin】pureadmin的登录对接后端

pureadmin的登录对接后端

在这个项目中，登录对接后端的路由主要通过以下几个部分实现：

1. 路由获取入口 - initRouter函数

登录成功后获取后端路由的核心函数是 initRouter()，它定义在：

ts:src/router/utils.ts 复制代码

function initRouter() {
  if (getConfig()?.CachingAsyncRoutes) {
    // 开启动态路由缓存本地localStorage
    const key = "async-routes";
    const asyncRouteList = storageLocal().getItem(key) as any;
    if (asyncRouteList && asyncRouteList?.length > 0) {
      return new Promise(resolve => {
        handleAsyncRoutes(asyncRouteList);
        resolve(router);
      });
    } else {
      return new Promise(resolve => {
        getAsyncRoutes().then(({ data }) => {
          handleAsyncRoutes(cloneDeep(data));
          storageLocal().setItem(key, data);
          resolve(router);
        });
      });
    }
  } else {
    return new Promise(resolve => {
      getAsyncRoutes().then(({ data }) => {
        handleAsyncRoutes(cloneDeep(data));
        resolve(router);
      });
    });
  }
}

2. 后端路由API接口定义

获取后端路由的API调用定义在：

ts:src/api/routes.ts 复制代码

export const getAsyncRoutes = () => {
  return http.request<Result>("get", "/get-async-routes");
};

这里调用了后端的 /get-async-routes 接口来获取用户有权限的路由信息。

3. 登录流程中的路由获取触发

在登录页面的登录处理函数中，当登录成功后会调用 initRouter() 函数：

ts:src/views/login/index.vue 复制代码

const onLogin = async (formEl: FormInstance | undefined) => {
  // ... 登录验证逻辑 ...
  useUserStoreHook()
    .loginByUsername({/* 登录数据 */})
    .then(res => {
      if (res.success) {
        // 获取后端路由
        return initRouter().then(() => {
          // 跳转到顶级菜单页面
          router.push(getTopMenu(true).path)
          // ... 其他处理 ...
        });
      }
    });
};

4. 后端路由处理与添加

获取到后端路由后，通过 handleAsyncRoutes() 函数进行处理并添加到路由实例中：

ts:src/router/utils.ts 复制代码

function handleAsyncRoutes(routeList) {
  if (routeList.length === 0) {
    usePermissionStoreHook().handleWholeMenus(routeList);
  } else {
    formatFlatteningRoutes(addAsyncRoutes(routeList)).map(
      (v: RouteRecordRaw) => {
        // 防止重复添加路由
        if (router.options.routes[0].children.findIndex(
            value => value.path === v.path
          ) !== -1) {
          return;
        } else {
          // 添加路由
          router.options.routes[0].children.push(v);
          ascending(router.options.routes[0].children);
          if (!router.hasRoute(v?.name)) router.addRoute(v);
          // ... 其他处理 ...
        }
      }
    );
    usePermissionStoreHook().handleWholeMenus(routeList);
  }
  // ... 其他处理 ...
}

5. 路由权限存储

处理后的路由会存储在 permission store 中，供菜单渲染和权限控制使用：

ts:src/store/modules/permission.ts 复制代码

/** 组装整体路由生成的菜单 */
handleWholeMenus(routes: any[]) {
  this.wholeMenus = filterNoPermissionTree(
    filterTree(ascending(this.constantMenus.concat(routes)))
  );
  this.flatteningRoutes = formatFlatteningRoutes(
    this.constantMenus.concat(routes) as any
  );
}

整体流程总结

用户在登录页面输入账号密码，点击登录
调用 userStore 中的 loginByUsername 方法，向后端发送登录请求
登录成功后，调用 initRouter() 函数获取后端路由
initRouter() 函数通过 getAsyncRoutes() 调用后端 /get-async-routes 接口
获取到后端路由后，通过 handleAsyncRoutes() 函数处理并添加到路由实例中
最后将处理后的路由存储在 permission store 中，用于菜单渲染和权限控制
登录成功后跳转到获取的顶级菜单页面

这种设计实现了前端动态路由加载，根据用户权限显示不同的菜单和页面。