vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第2节

vue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。

目标：打造好看 易用 开箱即用 的netcore一体化框架。

Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。

之前使用layui是时候 狠心升级下了。

只为了好看----------于是  小白教程来了。可以根据 git提交一步步来重现我的实现。

【后面会发布到在线 效果预览 http://www.hcrain.cn/   还没发布啊 我要将它改造成我自己想要的。要时间。这里占个坑而已。不回改文章了。】

第2节内容登录后细节整改

目录

1 代码地址（第1节忘记发了）

hcrain-vvadmin: vue-vben-admin 与.net core 结合实例这里计划使用.net core 作为后端 。打造一体化的 开箱即用 一体化框架。Vue Vben Admin For NetCore取命 hcrain-vvadmin我不是前端人员 但有时开发还是要写一些界面。之前使用layui是时候 狠心升级下了。只为了好看----------https://gitee.com/hechao58/hcrain-vvadmin

2解决上一节最后的问题  没实现的接口 mock还要使用的问题

3使用我们自己系统登录人员的要素

---

1 代码地址（第1节忘记发了）

hcrain-vvadmin: vue-vben-admin 与.net core 结合实例这里计划使用.net core 作为后端 。打造一体化的 开箱即用 一体化框架。Vue Vben Admin For NetCore取命 hcrain-vvadmin我不是前端人员 但有时开发还是要写一些界面。之前使用layui是时候 狠心升级下了。只为了好看----------https://gitee.com/hechao58/hcrain-vvadmin

2解决上一节最后的问题  没实现的接口 mock还要使用的问题

为我们自己的接口创建单独的http对象

defHttp是原有的。那么我们不要动它。自行新建我们真实业务使用的defHcHttp. 同时写死原有的地址。如下图

export const defHcHttp = createAxios();
// other api url
export const defHttp = createAxios({
   requestOptions: {
     apiUrl: '/basic-api',
   },
 });

当然还要兼容一些 因为接入我们自己接口时 改的地方。

具体参考git提交“解决没实现的接口 mock还要使用的问题”

3使用我们自己系统登录人员的要素

官方用例里 是单独接口取用户信息的。我这是登录直接返回的。所以每个人可能要根据自己情况来调整。

这里会问登录后去那了？我想不知道----分析下代码

登录后

1保存token

2获取用户信息（里面带了个主页信息）

3await router.replace(userInfo?.homePath || PageEnum.BASE_HOME)

还有其它细节 动态路由？？因为不懂  就先不管。能用就行。

async login(
      params: LoginParams & {
        goHome?: boolean;
        mode?: ErrorMessageMode;
      },
    ): Promise {
      try {
        const { goHome = true, mode, ...loginParams } = params;
        const re = await loginApi(loginParams, mode);
        // save token
        this.setToken('Bearer '+re.data.token);
        return this.afterLoginAction(goHome);
      } catch (error) {
        return Promise.reject(error);
      }
    },
    async afterLoginAction(goHome?: boolean): Promise {
      if (!this.getToken) return null;
      // get user info
      const userInfo = await this.getUserInfoAction();

      const sessionTimeout = this.sessionTimeout;
      if (sessionTimeout) {
        this.setSessionTimeout(false);
      } else {
        const permissionStore = usePermissionStore();
        if (!permissionStore.isDynamicAddedRoute) {
          const routes = await permissionStore.buildRoutesAction();
          routes.forEach((route) => {
            router.addRoute(route as unknown as RouteRecordRaw);
          });
          router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
          permissionStore.setDynamicAddedRoute(true);
        }
        goHome && (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME));
      }
      return userInfo;
    },

那就根据我自己的改他吧------调整后如下

【太难了 基本语法都不会。硬改的】

主要核心 就是  登录后直接建 const  u:UserInfo  对象

async login(
      params: LoginParams & {
        goHome?: boolean;
        mode?: ErrorMessageMode;
      },
    ): Promise {
      try {
        const { goHome = true, mode, ...loginParams } = params;
        const re = await loginApi(loginParams, mode);
        // save token
        this.setToken('Bearer '+re.data.token);
        const  u:UserInfo = {   userId:re.data.userId,
          username:re.data.userName,
          realName: re.data.userName,
          avatar: "",
          desc: "",
          homePath: "/dashboard/analysis",
          roles: [{ roleName:"",  value:""}] };
        return this.afterLoginAction(u,goHome);
      } catch (error) {
        return Promise.reject(error);
      }
    },
    async afterLoginAction(userInfo:UserInfo,goHome?: boolean): Promise {
      if (!this.getToken) return null;
   
      const { roles = [] } = userInfo;
      if (isArray(roles)) {
        const roleList = roles.map((item) => item.value) as RoleEnum[];
        this.setRoleList(roleList);
      } else {
        userInfo.roles = [];
        this.setRoleList([]);
      }
      this.setUserInfo(userInfo);

      // get user info
      //const userInfo2 = await this.getUserInfoAction();
      console.log(userInfo);
     // console.log(userInfo2);
      const sessionTimeout = this.sessionTimeout;
      if (sessionTimeout) {
        this.setSessionTimeout(false);
      } else {
        const permissionStore = usePermissionStore();
        if (!permissionStore.isDynamicAddedRoute) {
          const routes = await permissionStore.buildRoutesAction();
          routes.forEach((route) => {
            router.addRoute(route as unknown as RouteRecordRaw);
          });
          router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
          permissionStore.setDynamicAddedRoute(true);
        }
        goHome && (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME));
      }
      return userInfo;
    },
    async getUserInfoAction() {
     return getUserInfo();
    },

可以参考代码的提交 “登录细节处理”

到这里登录基本就完成了