Ant Design Pro 生成的代码中包含了用户认证部分的设计，但这部分只是基本的示意，并不完整，不能拿来直接使用。并且有些代码可以比较明显的看出是不同工程师编写的，质量不理想。

16.1 公共的Token函数

虽然保存和读取Token是很简单的操作，但我们还是要把它设计成公共函数放在src/utils/utils.ts，这样做的理由是如果修改存储Token的方案，只需要修改这两个函数。下面是用sessionStorage保存Token的代码

  1. export function saveToken(token: string) {
  2.   sessionStorage.setItem('token',token)
  3. }
  5. export function loadToken(): string | null {
  6.   return sessionStorage.getItem("token");
  7. }

16.2 重新定义数据类型

删除src/services/ant-design-pro/typings.d.ts中的CurrentUser、LoginResult、FakeCaptcha、LoginParams。

在src/services/type.d.ts中增加定义

  1.   type User = {
  2.     name?: string;
  3.     authorization?: any;
  4.     avatar?: string;
  5.     userid?: string;
  6.     email?: string;
  7.     signature?: string;
  8.     title?: string;
  9.     group?: string;
  10.     tags?: { key?: string; label?: string }[];
  11.     notifyCount?: number;
  12.     unreadCount?: number;
  13.     country?: string;
  14.     geographic?: {
  15.       province?: { label?: string; key?: string };
  16.       city?: { label?: string; key?: string };
  17.     };
  18.     address?: string;
  19.     phone?: string;
  20.   };
  22.   type LoginParams = {
  23.     username?: string;
  24.     password?: string;
  25.     mobile?: string;
  26.     captcha?: string;
  27.     type?: string;
  28.   };
  30.   type LoginResult = {
  31.     success: boolean;
  32.     type?: string;
  33.     data?: any;
  34.   };

把app.tsx中的API.CurrentUser修改成TYPE.User。

16.3 定义新的用户信息接口

删除src/services/ant-design-pro/login.ts文件，修改src/services/ant-design-pro/index.ts

  1. import * as api from './api';
  2. -import * as login from './login';
  3. export default {
  4.   api,
  5. - login,
  6. };

在src/services/ant-design-pro/api.ts中删除下面的内容

  1. /** 获取当前的用户 GET /api/currentUser */
  2. export async function currentUser(options?: { [key: string]: any }) {
  3.   return request<API.CurrentUser>('/api/currentUser', {
  4.     method: 'GET',
  5.     ...(options || {}),
  6.   });
  7. }
  9. /** 退出登录接口 POST /api/login/outLogin */
  10. export async function outLogin(options?: { [key: string]: any }) {
  11.   return request<Record<string, any>>('/api/login/outLogin', {
  12.     method: 'POST',
  13.     ...(options || {}),
  14.   });
  15. }
  17. /** 登录接口 POST /api/login/account */
  18. export async function login(body: API.LoginParams, options?: { [key: string]: any }) {
  19.   return request<API.LoginResult>('/api/login/account', {
  20.     method: 'POST',
  21.     headers: {
  22.       'Content-Type': 'application/json',
  23.     },
  24.     data: body,
  25.     ...(options || {}),
  26.   });
  27. }/** 获取当前的用户 GET /api/currentUser */
  28. export async function currentUser(options?: { [key: string]: any }) {
  29.   return request<API.CurrentUser>('/api/currentUser', {
  30.     method: 'GET',
  31.     ...(options || {}),
  32.   });
  33. }
  35. /** 登录接口 POST /api/login/outLogin */
  36. export async function outLogin(options?: { [key: string]: any }) {
  37.   return request<Record<string, any>>('/api/login/outLogin', {
  38.     method: 'POST',
  39.     ...(options || {}),
  40.   });
  41. }
  43. /** 登录接口 POST /api/login/account */
  44. export async function login(body: TYPE.LoginParams, options?: { [key: string]: any }) {
  45.   return request<TYPE.LoginResult>('/api/login/account', {
  46.     method: 'POST',
  47.     headers: {
  48.       'Content-Type': 'application/json',
  49.     },
  50.     data: body,
  51.     ...(options || {}),
  52.   });
  53. }

创建新文件services/api/user.ts

  1. // @ts-ignore
  2. /* eslint-disable */
  3. import { request } from 'umi';
  5. export async function login(body: TYPE.LoginParams, options?: { [key: string]: any }) {
  6.   return request<TYPE.LoginResult>('/api/user/login', {
  7.     method: 'POST',
  8.     data: body,
  9.     ...(options || {}),
  10.   });
  11. }
  13. export async function logout(options?: { [key: string]: any }) {
  14.   return request<Record<string, any>>('/api/user/logout', {
  15.     method: 'POST',
  16.     ...(options || {}),
  17.   });
  18. }
  20. export async function sendCaptcha( phone: string) {
  21.   return request('/api/user/sendCaptcha', {
  22.     method: 'POST',
  23.     params: {
  24.       phone
  25.     },
  26.   });
  27. }
  29. export async function currentUser(options?: { [key: string]: any }) {
  30.   return request<API.CurrentUser>('/api/user/getCurrentUser', {
  31.     method: 'GET',
  32.     ...(options || {}),
  33.   });
  34. }

16.4 修改用户登出的代码

在src/components/RightContent/AvatarDropdown.tsx中

  1. -import { outLogin } from '@/services/ant-design-pro/api';
  2. +import { logout } from '@/services/api/user';
  1. -const loginOut = async () => {
  2. -  await outLogin();
  3. +const handleLogout = async () => {
  4. + try {
  5. +   await logout();
  6. + } catch(e) { 
  7. + }
  1.         setInitialState({ ...initialState, currentUser: undefined });
  2. -              loginOut()
  3. +       handleLogout();

替logout问一句：loginOut、outLogin，这都是些什么鬼？

16.5 全面修订用户登录页

把src/pages/user/Login/index.tsx原有内容全部删除，置入如下代码

  1. import React, { useState } from 'react';
  2. import { Link, history, useModel } from 'umi';
  3. import { Alert, Space, message, Tabs, Form } from 'antd';
  4. import ProForm, { ProFormCaptcha, ProFormText } from '@ant-design/pro-form';
  5. import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
  6. import Footer from '@/components/Footer';
  7. import { login, sendCaptcha } from '@/services/api/user';
  8. import { fieldRuls, fidleNormalizes } from '@/utils/form-validator'
  9. import { saveToken } from '@/utils/utils'
  10. import styles from './index.less';
  12. const LoginMessage: React.FC<{
  13.   content: string;
  14. }> = ({ content }) => (
  15.   <Alert
  16.     message={content}
  17.     type="error"
  18.     showIcon
  19.     style={{
  20.       marginBottom: 24,
  21.     }}
  22.   />
  23. );
  25. /** 此方法会跳转到 redirect 参数所在的位置 */
  26. const redirect = () => {
  27.   if (!history) return;
  28.   setTimeout(() => {
  29.     const { query } = history.location;
  30.     const { redirect } = query as {
  31.       redirect: string;
  32.     };
  33.     history.push(redirect || '/');
  34.   }, 10);
  35. };
  37. const LoginPage: React.FC = () => {
  38.   //指示是否正在提交登录的数据
  39.   const [submitting, setSubmitting] = useState(false);
  40.   //登录的方式：account 或 mobile
  41.   const [loginType, setLoginType] = useState<string>('mobile');
  42.   //申请登录的结果
  43.   const [userLoginState, setUserLoginState] = useState<TYPE.LoginResult>();
  44.   //注意这个写法可以获得app.tsx中定义的全局共享数据
  45.   const { initialState, setInitialState } = useModel('@@initialState');
  47.   const [form] = Form.useForm();
  48.   const [captchaDisabled, setCaptchaDisabled] = useState(true)
  50.   //向服务器请求用户信息，如果成功了就把它放到全局共享数据中
  51.   const fetchUserInfo = async () => {
  52.     const userInfo = await initialState?.fetchUserInfo?.();
  54.     if (userInfo) {
  55.       setInitialState({ ...initialState, currentUser: userInfo });
  56.     }
  57.   };
  59.   //执行登录请求的函数，用户输入的信息被透传给后端，由后端进行判断
  60.   const handleSubmit = async (values: TYPE.LoginParams) => {
  61.     setSubmitting(true);
  63.     try {
  64.       const loginResult = await login({ ...values, type: loginType });
  65.       const { token=undefined } = loginResult.data
  66.       if (loginResult.success && token) {
  67.         saveToken(token)
  68.         await fetchUserInfo();
  69.         redirect();
  71.         return;
  72.       } 
  73.       // 如果失败去设置用户错误信息
  74.       setUserLoginState(loginResult);
  75.     } catch (error) {
  76.       //这里是因为其它原因失败
  77.       message.error('登录失败，请重试！');
  78.     }
  80.     setSubmitting(false);
  81.   };
  83.   return (
  84.     <div className={styles.container}>
  85.       <div className={styles.content}>
  86.         <div className={styles.top}>
  87.           <div className={styles.header}>
  88.             <Link to="/">
  89.               <img alt="logo" className={styles.logo} src="/logo.png" />
  90.             </Link>
  91.           </div>
  92.           <div className={styles.desc}>基层工会工作云软件</div>
  93.         </div>
  95.         <div className={styles.main}>
  96.           <ProForm
  97.             form={form}
  98.             initialValues={{
  99.               //这里是为了调试方便，正式发布的时候必须删除
  100.               username: 'admin',
  101.               password:'admin',
  102.             }}
  103.             submitter={{
  104.               searchConfig: {
  105.                 submitText: '登录',
  106.               },
  107.               render: (_, dom) => dom.pop(),
  108.               submitButtonProps: {
  109.                 loading: submitting,
  110.                 size: 'large',
  111.                 style: {
  112.                   width: '100%',
  113.                 },
  114.               },
  115.             }}
  116.             onFinish={handleSubmit}
  117.           >
  118.             <Tabs activeKey={loginType} onChange={setLoginType}>
  119.               <Tabs.TabPane key="account" tab='账户密码登录' />
  120.               <Tabs.TabPane key="mobile" tab='手机号登录' />
  121.             </Tabs>
  123.             {!userLoginState?.success && userLoginState?.type === 'account' 
  124.               && <LoginMessage content='账户或密码错误' /> }
  125.             {loginType === 'account' && (
  126.               <>
  127.                 <ProFormText
  128.                   name="username"
  129.                   placeholder='请输入用户名'
  130.                   rules={[...fieldRuls['required']]} 
  131.                   fieldProps={{
  132.                     size: 'large',
  133.                     prefix: <UserOutlined className={styles.prefixIcon} />,
  134.                   }}
  135.                 />
  136.                 <ProFormText.Password
  137.                   name="password"
  138.                   placeholder='请输入密码'
  139.                   rules={[...fieldRuls['required']]} 
  140.                   fieldProps={{
  141.                     size: 'large',
  142.                     prefix: <LockOutlined className={styles.prefixIcon} />,
  143.                   }}
  144.                 />
  145.               </>
  146.             )}
  148.             {!userLoginState?.success && userLoginState?.type === 'mobile' 
  149.               && <LoginMessage content="验证码错误" />}
  150.             {loginType === 'mobile' && (
  151.               <>
  152.                 <ProFormText
  153.                   name="mobile"
  154.                   placeholder='输入手机号码'
  155.                   rules={[...fieldRuls['required'], ...fieldRuls['mobile']]} 
  156.                   normalize={fidleNormalizes['mobile']}
  157.                   fieldProps={{
  158.                     size: 'large',
  159.                     autoComplete: 'off',
  160.                     prefix: <MobileOutlined className={styles.prefixIcon} />,
  161.                   }}
  162.                 />
  163.                 <ProFormCaptcha
  164.                   name="captcha"
  165.                   phoneName="mobile"
  166.                   placeholder='请输入验证码'
  167.                   rules={[...fieldRuls['required'], ...fieldRuls['captcha']]} 
  168.                   normalize={fidleNormalizes['digit']}
  169.                   disabled={captchaDisabled}
  170.                   fieldProps={{
  171.                     size: 'large',
  172.                     autoComplete: 'off',
  173.                     maxLength: 6,
  174.                     prefix: <LockOutlined className={styles.prefixIcon} />,
  175.                   }}
  176.                   captchaProps={{
  177.                     size: 'large',
  178.                   }}
  179.                   captchaTextRender={(timing, count) => {
  180.                     if (timing)  return `${count} ${'获取验证码'}`;
  181.                     return '获取验证码';
  182.                   }}                  
  183.                   onGetCaptcha={async (phone) => {
  184.                     try {
  185.                       setCaptchaDisabled(true)
  186.                       const result = await sendCaptcha( phone );
  188.                       if (result.success)  {
  189.                         setCaptchaDisabled(false)
  190.                         form.setFieldsValue({captcha: ''})     
  191.                         //注意：
  192.                         //  antd 4.4.0中的getFieldInstance方法后来又失效了
  193.                         //  虽然可在fieldProps中强行使用ref，但会得运行时的警告
  194.                         //  所以只好用老办法得到实例
  195.                         document.getElementById('captcha')?.focus()
  196.                         message.success('已经把验证码发送到你的手机上');  
  197.                       }
  198.                     } catch(e) {
  199.                     }
  200.                   }}
  201.                 />
  202.               </>
  203.             )}
  204.             <div style={{ marginBottom: 12, textAlign: 'right'}} >
  205.               <a>忘记密码 ?</a>
  206.             </div>
  207.           </ProForm>
  208.           <Space className={styles.other}></Space>
  209.         </div>
  210.       </div>
  211.       <Footer />
  212.     </div>
  213.   );
  214. };
  216. export default LoginPage;

16.6 增加Request全局拦截器

在app.tsx中增加一个Request的全局拦截器，在所有网络请求的头部都附加上Token。
首先是修改引用定义

  1. -import type { ResponseError } from 'umi-request';
  2. +import type { ResponseError, RequestOptionsInit } from 'umi-request';
  3. +import { loadToken } from '@/utils/utils'
  4. -import { currentUser as queryCurrentUser } from './services/ant-design-pro/api';
  5. +import { currentUser as queryCurrentUser } from './services/api/user';
  6. -import { BookOutlined, LinkOutlined } from '@ant-design/icons';
  7. +import { BookOutlined } from '@ant-design/icons';

修改当前的类型定义

  1. - currentUser?: API.CurrentUser;
  2. + currentUser?: TYPE.User;
  3. - fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
  4. + fetchUserInfo?: () => Promise<TYPE.User | undefined>;

定义一个设置HTTP Request头的函数

  1. function setHeaders(url: string, options:RequestOptionsInit) {
  2.   const { headers={}, ...rest } = options;
  3.   const jwtToken = loadToken();
  5.   if (jwtToken) {
  6.     headers['Token'] = jwtToken;
  7.   };
  9.   return {
  10.       url,
  11.       options: { ...rest, headers },
  12.   }
  13. }
  15. // https://umijs.org/zh-CN/plugins/plugin-request
  16. export const request: RequestConfig = {
  17.   errorHandler,
  18.   requestInterceptors: [setHeaders],
  19. };

定义全局拦截器

  1. export const request: RequestConfig = {
  2. + //请求拦截器
  3. + requestInterceptors: [setHeaders],
  4. + //异常处理程序
  5.   errorHandler: (error: ResponseError) => {

16.7 全面修订Mock代码

把mock/user.ts原有内容全部删除，置入如下代码

  1. import { Request, Response } from 'express';
  3. const waitTime = (time: number = 100) => {
  4.   return new Promise((resolve) => {
  5.     setTimeout(() => {
  6.       resolve(true);
  7.     }, time);
  8.   });
  9. };
  11. const adminToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyIn0.ib58asBJGXFLPNuu1nb8BAibo-Zi0luZt6UynBaVyX0'
  12. const notmalToken = '123.456.789'
  13. let userToken:string | undefined = undefined
  15. function makeToken(username = 'user'): string {
  16.   if(username === 'admin')
  17.     userToken = adminToken
  18.   else
  19.     userToken = notmalToken
  21.   return userToken
  22. }
  24. function clearToken() {
  25.   userToken = undefined
  26. }
  28. function checkToken(token: string | undefined): boolean {
  29.   return userToken != undefined && token === userToken
  30. }
  32. let currentCaptcha: string | undefined;
  33. async function getFakeCaptcha(req: Request, res: Response) {
  34.   currentCaptcha = Math.floor(Math.random() * 10000000) % 1000000 + '';
  35.   currentCaptcha = currentCaptcha.padStart(6, '0');
  36.   console.log("The captcha is ", currentCaptcha);
  38.   return res.json({
  39.     success: true,
  40.   });
  41. }
  43. async function login(req: Request, res: Response) {
  44.   const { password, username, captcha, type } = req.body;
  45.   const result:TYPE.QueryResult & {type:string} = {
  46.     success: true,
  47.     type,
  48.     data: {}
  49.   }
  51.   console.log("body = ", req.body)
  53.   await waitTime(2000);
  55.   if(type === 'account') {
  56.     if (password === 'admin' && username === 'admin') {
  57.       result.data['token'] = makeToken(username)
  58.     }
  59.     if (password === 'user' && username === 'user') {
  60.       result.data['token'] = makeToken(username)
  61.     }
  62.   } else {
  63.     if(currentCaptcha != captcha) {
  64.       result.success = false;
  65.       result.errorMessage = '验证码错误'
  66.     } else
  67.       result.data['token'] = makeToken()
  68.   }
  70.   return res.json(result);
  71. }  
  73. function getUserInfo(req: Request, res: Response) {  
  74.   res.send({
  75.     name: 'Serati Ma',
  76.     avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
  77.     userid: '00000001',
  78.     email: 'antdesign@alipay.com',
  79.     signature: '海纳百川，有容乃大',
  80.     title: '交互专家',
  81.     group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
  82.     tags: [
  83.       {
  84.         key: '3',
  85.         label: '大长腿',
  86.       },
  87.       {
  88.         key: '5',
  89.         label: '海纳百川',
  90.       },
  91.     ],
  92.     notifyCount: 12,
  93.     unreadCount: 11,
  94.     country: 'China',
  95.     geographic: {
  96.       province: {
  97.         label: '浙江省',
  98.         key: '330000',
  99.       },
  100.       city: {
  101.         label: '杭州市',
  102.         key: '330100',
  103.       },
  104.     },
  105.     address: '西湖区工专路 77 号',
  106.     phone: '0752-268888888',
  107.   });
  108. }
  110. function logout(req: Request, res: Response)  {
  111.   clearToken()
  112.   res.send({ data: {}, success: true });
  113. }
  115. const mockFunction = {}
  116. const mockList = {}
  118. function filter(req: Request, res: Response) {
  119.   if(!checkToken(req.headers.token as string)) {
  120.     return res.json({
  121.       success: false,
  122.       errorCode: 401,
  123.       errorMessage: '请登录',
  124.     })
  125.   }
  127.   const index = req.url.indexOf('?')
  128.   const url = index > 0? req.url.substring(0,index) : req.url
  130.   return mockFunction[url](req, res);
  131. }
  133. function parseFilter() {
  134.   var keys = Object.keys(filters)
  136.   for(let key of keys) {
  137.     const index = key.indexOf(' ')
  138.     const url = index > 0? key.substring(index).trimLeft() : key 
  140.     mockList[key] = filter, 
  141.     mockFunction[url] = filters[key]
  142.   }
  143. }
  145. const filters = {
  146.   'GET /api/user/getCurrentUser': getUserInfo,
  147. }
  149. parseFilter()
  151. export default {
  152.   'POST /api/user/login': login,
  153.   'POST /api/user/logout': logout,
  154.   'GET  /api/user/sendCaptcha': getFakeCaptcha,
  155.   ...mockList,
  156. };

请注意在上面的代码中，我们给Mock设计了一个自动化的过滤器的机制，所有需要检查Token状态的API都定义在在filters中，这些API会在被正式调用前执行自动检查。这个的作用和实际开发中后端的请求过滤器近似。

需要说明的是，这里的Mock代码只是对后端行为的简单模拟，请勿照搬Mock的逻辑来开发后端应用。后端应该严格执行所有的数据检查，不能默认相信任何前端传递的数据。

16.8 图标及页面风格

把user/Login/index.tsx中用到的logo.png放到public目录下。修改user/Login/index.less

  1. .header {
  2. - height: 44px;
  3. - line-height: 44px;
  4. + height: 120px;
  5. + line-height: 1em;
  1. .logo {
  2. - height: 44px;
  3. + height: 100%;

版权说明：本文由北京朗思云网科技股份有限公司原创，向互联网开放全部内容但保留所有权力。