一、页面版式修改

/pages/User/Login/index.tsx 登陆页面组件路径

那么我们需要做如下操作改造登陆页面：

〈Lang /〉组件是为了实现国际化，可注释掉
修改登陆框的主标题和子标题
将通过用户密码登陆和手机号登陆根据项目实际情况修改成只支持帐密登陆
将忘记密码修改成“注册用户”的连接，点击跳转到/user/register登陆页面
注释掉下方的其他登陆方式栏目

最终实现的登陆页面效果如下：

由于此页面主要是调用了ant design pro的模块LoginForm ，具体修改的模块见下方代码。

{/*@umijs/plugin-helmet插件，实现动态修改HTML文档标签*/}{intl.formatMessage({id: 'menu.login',defaultMessage: '登录页',})}- {Settings.title}{/*实现国际化文字*/}{/**/}{flex: '1',padding: '32px 0',}}>{minWidth: 280,maxWidth: '75vw',}}logo={}// title="Ant Design"title="登陆"// subTitle={intl.formatMessage({id: 'pages.layouts.userLayout.title'})}subTitle='基于React+ant design Pro +Ts的企业级应用'initialValues={{autoLogin: true,}}// actions={[//   ,//   ,// ]}onFinish={async (values) => {await handleSubmit(values as API.LoginParams);}}>{/**/}{status === 'error' && loginType === 'account' && ()}{type === 'account' && (<>{size: 'large',prefix: ,}}placeholder={intl.formatMessage({id: 'pages.login.identifier.placeholder',defaultMessage: '请输入用户名',})}rules={[{required: true,message: (),},]}/>{size: 'large',prefix: ,}}placeholder={intl.formatMessage({id: 'pages.login.password.placeholder',defaultMessage: '请输入密码',})}rules={[{required: true,message: (),},]}/>)}{/*{status === 'error' && loginType === 'mobile' && }*/}{/*{type === 'mobile' && (*/}{/*  <>*/}{/*    {*/}{/*        size: 'large',*/}{/*        prefix: ,*/}{/*      }}*/}{/*      name="mobile"*/}{/*      placeholder={intl.formatMessage({*/}{/*        id: 'pages.login.phoneNumber.placeholder',*/}{/*        defaultMessage: '手机号',*/}{/*      })}*/}{/*      rules={[*/}{/*        {*/}{/*          required: true,*/}{/*          message: (*/}{/*            */}{/*          ),*/}{/*        },*/}{/*        {*/}{/*          pattern: /^1\d{10}$/,*/}{/*          message: (*/}{/*            */}{/*          ),*/}{/*        },*/}{/*      ]}*/}{/*    />*/}{/*    {*/}{/*        size: 'large',*/}{/*        prefix: ,*/}{/*      }}*/}{/*      captchaProps={{*/}{/*        size: 'large',*/}{/*      }}*/}{/*      placeholder={intl.formatMessage({*/}{/*        id: 'pages.login.captcha.placeholder',*/}{/*        defaultMessage: '请输入验证码',*/}{/*      })}*/}{/*      captchaTextRender={(timing, count) => {*/}{/*        if (timing) {*/}{/*          return `${count} ${intl.formatMessage({*/}{/*            id: 'pages.getCaptchaSecondText',*/}{/*            defaultMessage: '获取验证码',*/}{/*          })}`;*/}{/*        }*/}{/*        return intl.formatMessage({*/}{/*          id: 'pages.login.phoneLogin.getVerificationCode',*/}{/*          defaultMessage: '获取验证码',*/}{/*        });*/}{/*      }}*/}{/*      name="captcha"*/}{/*      rules={[*/}{/*        {*/}{/*          required: true,*/}{/*          message: (*/}{/*            */}{/*          ),*/}{/*        },*/}{/*      ]}*/}{/*      onGetCaptcha={async (phone) => {*/}{/*        const result = await getFakeCaptcha({*/}{/*          phone,*/}{/*        });*/}{/*        if (!result) {*/}{/*          return;*/}{/*        }*/}{/*        message.success('获取验证码成功！验证码为：1234');*/}{/*      }}*/}{/*    />*/}{/*  */}{/*)}*/}{marginBottom: 24,}}>{float: 'right',}}// 点击跳转注册页面onClick={() =>history.push({pathname: '/user/register',})}>注册用户

二、对接Strapi实现用户登陆

接下来要对接Strapi登陆模块，主要是点击登陆按钮，触发strapi的login接口，具体为点击登陆按钮后触发handleSubmit函数，此函数逻辑为将用户输入到帐号/密码传入login登陆函数，然后将返回到jwt和user保存到localStorage中去。此后触发fetchUserInfo函数，然后重定向到首页

 const handleSubmit = async (values: API.LoginParams) => {try {const msg = await login({identifier: values.identifier, password: values.password});message.success('登陆成功')localStorage.setItem("token", msg.jwt);localStorage.setItem("user", msg.user);await fetchUserInfo();history.push( '/');return;} catch (error) {const defaultLoginFailureMessage = intl.formatMessage({id: 'pages.login.failure',defaultMessage: '登录失败，请重试！',});message.error(defaultLoginFailureMessage);}};

/** 登录接口 POST /api/login/account */
export async function login(body: API.LoginParams, options?: { [key: string]: any }) {return request('/api/auth/local', {method: 'POST',// headers: {//   'Content-Type': 'application/json',// },data: body,...(options || {}),});
}

  const fetchUserInfo = async () => {//修改成从local storage获取用户信息const userInfo = localStorage.getItem('user')if (userInfo) {// @ts-ignoresetInitialState({currentUser: userInfo})}};

因此可实现登陆效果

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：Angular1.x与Angular2+区别

下一篇：【Linux】进程状态（阻塞、挂起、僵尸进程）

react+antdpro+ts实现企业级前端项目三：实现系统登陆

一、页面版式修改

二、对接Strapi实现用户登陆

相关内容

热门资讯