玩转Vben Admin第4改：注册页面功能实现

复制原有的登录功能，如此一来，注册后就能够自动登录系统。

第一步：修改 /src/api/sys/user.ts 添加接口提交代码

/**
 * @description: user register api
 */
export function registerApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
  return defHttp.post<LoginResultModel>(
    {
      url: Api.Register,
      params,
    },
    {
      errorMessageMode: mode,
    },
  );
}

 

第二步：修改 /src/store/modules/user.ts 文件

1：修改import代码，把registerApi加进来

import { doLogout, getUserInfo, loginApi, registerApi } from '/@/api/sys/user';

2：添加下面代码（这是复制登录部分的代码修改而来，因此注册完后就会自动登录）

    /**
     * @description: register
     */
    async register(
      params: LoginParams & {
        goHome?: boolean;
        mode?: ErrorMessageMode;
      },
    ): Promise<GetUserInfoModel | null> {
      try {
        const { goHome = true, mode, ...registerParams } = params;
        const data = await registerApi(registerParams, mode);
        const { token } = data;

        // save token
        this.setToken(token);
        return this.afterLoginAction(goHome);
      } catch (error) {
        return Promise.reject(error);
      }
    },

 

第三步：修改 /src/views/sys/login/RegisterForm.vue 文件
1：增加import代码

  import { useMessage } from '/@/hooks/web/useMessage';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useUserStore } from '/@/store/modules/user';

2：增加const定义代码

  const { notification, createErrorModal } = useMessage();
  const { prefixCls } = useDesign('login');
  const userStore = useUserStore();

3：在 async function handleRegister() 函数的“}”前面添加代码

    try {
      loading.value = true;
      const userInfo = await userStore.register({
        password: data.password,
        username: data.account,
        mode: 'none', //不要默认的错误提示
      });
      if (userInfo) {
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
          duration: 3,
        });
      }
    } catch (error) {
      createErrorModal({
        title: t('sys.api.errorTip'),
        content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
        getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
      });
    } finally {
      loading.value = false;
    }

好了，现在前端部分的代码都已经完成，开始开发后端代码了。