目前我们的功能只是实现了调用登录接口,并返回数据. 针对接下来的逻辑需要继续完善.

暂存用户信息和token

思路和 vue-element-admin 基本类似: 登录返回token,存储token, 根据是否有token判断是否允许访问后台页面.
和之前的项目一样, 创建工具类 utils/myAuth.ts :

  1. import type {UserInfoType} from '@/pages/Login/model';
  2. // 定义key
  3. const USER_INFO_KEY = 'REACT_DEMO_USER';
  4. const USER_TOKEN_KEY = 'REACT_DEMO_TOKEN';
  6. /**
  7.  * 把用户信息存入localstorage
  8.  * @param userInfo 
  9.  */
  10. export function saveUserInfo(userInfo: UserInfoType){
  11.   const userInfoStr: string = JSON.stringify(userInfo);
  12.   window.localStorage.setItem(USER_INFO_KEY,userInfoStr);
  13. }
  14. /**
  15.  * 删除用户信息
  16.  */
  17. export function removeUserInfo(){
  18.   window.localStorage.removeItem(USER_INFO_KEY);
  19. }
  20. /**
  21.  * 获取用户信息
  22.  */
  23. export function getUserInfo(){
  24.   const userInfoStr =  window.localStorage.getItem(USER_INFO_KEY);
  25.   if(userInfoStr == null){
  26.     return null;
  27.   }
  28.     const userInfo: UserInfoType = JSON.parse(userInfoStr);
  29.     return userInfo;
  30. }
  32. /**
  33.  * 保存token
  34.  * @param token 
  35.  */
  36. export function saveToken(token: string){
  37.   window.localStorage.setItem(USER_TOKEN_KEY,token);
  38. }
  40. /**
  41.  * 删除token
  42.  */
  43. export function removeToken(){
  44.   window.localStorage.removeItem(USER_TOKEN_KEY);
  45. }
  47. /**
  48.  * 获取token
  49.  */
  50. export function getToken(){
  51.   const tokenStr = window.localStorage.getItem(USER_TOKEN_KEY);
  52.   return tokenStr;
  53. }
  54. /**
  55.  * 清楚用户登录信息
  56.  */
  57. export function clearUserLoginInfo(){
  58.   removeUserInfo();
  59.   removeToken();
  60. }

因为具体的登录调用和结果处理是在 pages/Login/model.ts 中的,所以在这里把用户信息和token存入localstorage: 

  1. import {saveUserInfo,saveToken } from '@/utils/myAuth';
  2. ...
  4. *doLogin(action, {call,put}){
  5.       // 打印action,查看对象结构
  6.       // console.log(action);
  7.       const {payload} = action;
  8.       // message与引入模块冲突 重命名为: errMsg
  9.       const {data,success,message:errMsg} = yield call(loginApi,payload);
  10.       if(success){
  11.         // 存入state
  12.         // put专门用于调用 reducer, 而且需要添加 迭代器 yield修饰符
  13.         yield put({
  14.           type: 'initUserInfo',
  15.           payload: data
  16.         })
  17.         // 存入localstorage
  18.               // 思考: 为什么不用state?
  19.         const {token,userInfo} = data;
  20.         saveUserInfo(userInfo);
  21.         saveToken(token);
  22.         message.success('登录成功!');
  23.         // 跳转后台页面
  24.         window.location.href = '/';
  25.       }else{
  26.         // 返回错误 提示错误信息 不跳转
  27.         message.error(errMsg);
  28.       }

image.png

导航守卫?

但是在antd中没有vue中的导航守卫, 我们需要在 src\layouts\SecurityLayout.tsx 中对是否登录做权限控制.
通过自定义 isLogin 的逻辑, 我们就可以判断是否允许访问位于 SecurityLayout 内部的组件. 实际开发中,后台除了登录页(排除个别声明页)其他页面都应该在登录权限的保护下访问. 所以 SecurityLayout 组件可以理解为antd项目的 导航守卫 .
注意: 至于页面权限,比如用户角色能否访问某个页面的需求,暂且不讨论,我们会后期在权限篇给大家说明.
image.png

  1. import React from 'react';
  2. import { PageLoading } from '@ant-design/pro-layout';
  3. import type { ConnectProps } from 'umi';
  4. import { Redirect, connect  } from 'umi';
  5. import { stringify } from 'querystring';
  6. // import type { ConnectState } from '@/models/connect';
  7. import type { CurrentUser } from '@/models/user';
  8. import {getToken} from '@/utils/myAuth';
  10. type SecurityLayoutProps = {
  11.   loading?: boolean;
  12.   currentUser?: CurrentUser;
  13. } & ConnectProps;
  15. type SecurityLayoutState = {
  16.   isReady: boolean;
  17. };
  20. class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayoutState> {
  21.   state: SecurityLayoutState = {
  22.     isReady: false,
  23.   };
  25.   // react的声明周期函数  组件渲染完毕后触发,类似于vue的mounted
  26.   componentDidMount() {
  27.     this.setState({
  28.       isReady: true,
  29.     });
  30.     // 这里注销掉 已经不需要框架本身的 登录 方法
  31.     // const { dispatch } = this.props;
  32.     // if (dispatch) {
  33.     //   dispatch({
  34.     //     type: 'user/fetchCurrent',
  35.     //   });
  36.     // }
  37.   }
  39.   render() {
  40.     const { isReady } = this.state;
  41.     const { children, loading } = this.props;
  42.     // You can replace it to your authentication rule (such as check token exists)
  43.     // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
  44.     // const isLogin = currentUser && currentUser.userid;
  45.     // 这里换成判断token是否存在
  46.     const isLogin = getToken();
  47.     const queryString = stringify({
  48.       redirect: window.location.href,
  49.     });
  50.     if ((!isLogin && loading) || !isReady) {
  51.       return <PageLoading/>;
  52.     }
  53.     if (!isLogin && window.location.pathname !== '/user/login') {
  54.       return <Redirect to={`/user/login?${queryString}`} />;
  55.     }
  56.     return children;
  57.   }
  58. }
  60. // #https://github.com/dvajs/dva/tree/master/packages/dva-loading
  61. // # https://umijs.org/zh-CN/plugins/plugin-dva
  62. // 这里 loading是dva-loading 的插件,可以监听某个model的effects是否出于异步进行中
  64. const mapStateToProps = (state: any) =>{
  65.   return {
  66.     loading: state.loading.models.myLogin as boolean
  67.   }
  68. }
  69. export default connect(mapStateToProps)(SecurityLayout);

登录成功!

我们成功的登录到了后台,进入默认欢迎页,但页发现了几个问题:

  • header的用户中心为什么是loading状态?
  • 左边导航应该有的admin(权限)页面跑哪了?
    • 因为我们使用了自己的登录逻辑,并没有标识当前用户的角色,导航菜单是根据角色判断的
  • 如何退出?

image.png

退出

剩下两个问题很容易通过阅读 src\components\GlobalHeader\AvatarDropdown.tsx 代码来理解.
退出功能就比较简单了,我们需要清空用户登录信息和token,然后跳转首页:

  1. import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
  2. import { Avatar, Menu, Spin } from 'antd';
  3. import type { Dispatch } from 'react';
  4. import React from 'react';
  5. import type { ConnectProps } from 'umi';
  6. import { history ,connect} from 'umi';
  7. // import type { ConnectState } from '@/models/connect';
  8. import type { CurrentUser } from '@/models/user';
  9. // 引入封装的获取用户信息的方法
  10. import {getUserInfo} from '@/utils/myAuth';
  11. import HeaderDropdown from '../HeaderDropdown';
  12. import styles from './index.less';
  14. export type GlobalHeaderRightProps = {
  15.   currentUser?: CurrentUser;
  16.   menu?: boolean;
  17. } & Partial<ConnectProps>;
  19. class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  20.   onMenuClick = (event: {
  21.     key: React.Key;
  22.     keyPath: React.Key[];
  23.     item: React.ReactInstance;
  24.     domEvent: React.MouseEvent<HTMLElement>;
  25.   }) => {
  26.     const { key } = event;
  27.     // 判断如果是退出按钮 则执行退出逻辑
  28.     if (key === 'logout') {
  29.         const { dispatch } = this.props;
  30.       if (dispatch) {
  31.         dispatch({
  32.           type: 'myLogin/doLogout',
  33.         });
  34.       }
  35.       return;
  36.     }
  38.     history.push(`/account/${key}`);
  39.   };
  41.   render(): React.ReactNode {
  42.     const { menu} = this.props;
  43.     // 根据自己的业务逻辑 从localStorage中获取用户信息
  44.     const currentUser = getUserInfo();
  45.     const menuHeaderDropdown = (
  46.       <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
  47.         {menu && (
  48.           <Menu.Item key="center">
  49.             <UserOutlined />
  50.             个人中心
  51.           </Menu.Item>
  52.         )}
  53.         {menu && (
  54.           <Menu.Item key="settings">
  55.             <SettingOutlined />
  56.             个人设置
  57.           </Menu.Item>
  58.         )}
  59.         {menu && <Menu.Divider />}
  61.         <Menu.Item key="logout">
  62.           <LogoutOutlined />
  63.           退出登录
  64.         </Menu.Item>
  65.       </Menu>
  66.     );
  67.     return currentUser && currentUser.username ? (
  68.       <HeaderDropdown overlay={menuHeaderDropdown}>
  69.         <span className={`${styles.action} ${styles.account}`}>
  70.           <Avatar size="small" className={styles.avatar} src={currentUser.icon} alt="avatar" />
  71.           <span className={`${styles.name} anticon`}>{currentUser.nickname}</span>
  72.         </span>
  73.       </HeaderDropdown>
  74.     ) : (
  75.       <span className={`${styles.action} ${styles.account}`}>
  76.         <Spin
  77.           size="small"
  78.           style={{
  79.             marginLeft: 8,
  80.             marginRight: 8,
  81.           }}
  82.         />
  83.       </span>
  84.     );
  85.   }
  86. }
  87. // 没有用到mode 所以这里暂时注销
  88. // export default connect(({ user }: ConnectState) => ({
  89. //   currentUser: user.currentUser,
  90. // }))(AvatarDropdown);
  91. const mapDispatchToProps = (dispatch)=>({
  92.   dispatch
  93. })
  94. export default connect(mapDispatchToProps)(AvatarDropdown);

修改 pages/Login/model.ts :

  1. import { history } from 'umi';
  2. import {clearUserLoginInfo} from '@/utils/myAuth';
  4. export type MType = {
  5.   ...
  6.   effects: {
  7.     doLogin: Effect;
  8.     doLogout: Effect;
  9.   };
  10.     ...
  11. }
  13. effects: {
  14.  ...
  15.  // 添加doLogout方法
  16.  doLogout(){
  17.       // 清空登录用户信息和token
  18.       clearUserLoginInfo();
  19.       history.replace({
  20.         pathname: '/user/login'
  21.       });
  22.     }
  24. }

image.png

总结

在不考虑菜单访问权限的前提下,我们已经实现了基本的登录与退出逻辑,而且获取到了用户的基本信息和之后访问api所需要的token . 我们可以快乐的开始接下来的开发了.