添加注册功能以及标题更新（四）

一、添加注册功能

1、改造form组件提交函数，加入登录和注册的条件判断

consthandleSubmit=async(values:API.LoginParams)=>{if(type==='login'){try{// 登录const res =awaitlogin({...values, type });if(res.code ===200){
          localStorage.setItem('token',res.token);const defaultLoginSuccessMessage = intl.formatMessage({id:'pages.login.success',defaultMessage:'登录成功！',});
          message.success(defaultLoginSuccessMessage);awaitfetchUserInfo();const urlParams =newURL(window.location.href).searchParams;
          history.push(urlParams.get('redirect')||'/');return;}// 如果失败去设置用户错误信息setUserLoginState(res);}catch(error){const defaultLoginFailureMessage = intl.formatMessage({id:'pages.login.failure',defaultMessage:'登录失败，请重试！',});
        message.error(defaultLoginFailureMessage);}}else{try{// 登录const res =awaitregister({...values, type });if(res.code ===200){const defaultLoginSuccessMessage = intl.formatMessage({id:'pages.register.success',defaultMessage:'注册成功！',});
          message.success(defaultLoginSuccessMessage);setType('login');}}catch(error){const defaultLoginFailureMessage = intl.formatMessage({id:'pages.register.failure',defaultMessage:'注册失败，请重试！',});
        message.error(defaultLoginFailureMessage);}}};

2、src/services/custom/api.ts加入注册接口

/** 注册接口 POST /api/user/register */exportasyncfunctionregister(body:API.LoginParams, options?:{[key: string]: any }){return request<API.LoginResult>('/api/user/register',{method:'POST',headers:{'Content-Type':'application/json',},data: body,...(options ||{}),});}

3、增加交互逻辑，注册成功后自动切换登录模块

setType('login');

4、增加注册相关多语言提示

src/locales/zh-CN/page.ts增加相关注册提示

'pages.register.failure':'注册失败，请重试！','pages.register.success':'注册成功！',

应用到注册方法中

try{// 注册const res =awaitregister({...values, type });if(res.code ===200){const defaultLoginSuccessMessage = intl.formatMessage({id:'pages.register.success',defaultMessage:'注册成功！',});
    message.success(defaultLoginSuccessMessage);setType('login');}}catch(error){const defaultLoginFailureMessage = intl.formatMessage({id:'pages.register.failure',defaultMessage:'注册失败，请重试！',});
  message.error(defaultLoginFailureMessage);}

至此，简单的注册功能已完成