antd pro v5 记录

爱被打了一巴掌 2022-09-15 11:47 9阅读 0赞

**登录后获取用户信息**

umi 使用models结合app.tsx中getInitialState方法绑定，请求用户信息接口。promise回传登录页。

login.tsx

const handleSubmit = async (values: API.LoginParams) => {
        console.log('values:', values)
        setSubmitting(true);
        try {
          // 登录
          const data = await login({ ...values, type });
          console.log('login data:', data)
          if (data.code === 200) {
            message.success('登录成功！');
    
            if (localStorage.getItem('token') == null || localStorage.getItem('token') == undefined) {
              localStorage.setItem('token', '');
            }
            localStorage.setItem('token', data.data.token);
    
            await fetchUserInfo();
            goto();
            return;
          }
          // 如果失败去设置用户错误信息
          setUserLoginState(data);
        } catch (error) {
          const defaultloginFailureMessage = intl.formatMessage({
            id: 'pages.login.failure',
            defaultMessage: '登录失败，请重试！',
          });
          message.error(defaultloginFailureMessage);
        }
        setSubmitting(false);
      };

const { initialState, setInitialState } = useModel('@@initialState');

const fetchUserInfo = async () => {
        const userInfo = await initialState?.fetchUserInfo?.();
        if (userInfo) {
          setInitialState({
            ...initialState,
            currentUser: userInfo,
          });
        }
      };

app.tsx

export async function getInitialState(): Promise<{
      settings?: Partial<LayoutSettings>;
      currentUser?: API.CurrentUser;
      fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
    }> {
      const fetchUserInfo = async () => {
        try {
          const currentUser = await queryCurrentUser();
          return currentUser?.data;
        } catch (error) {
          history.push(loginPath);
        }
        return undefined;
      };
      // 如果是登录页面，不执行
      if (history.location.pathname !== loginPath) {
        const currentUser = await fetchUserInfo();
        return {
          fetchUserInfo,
          currentUser,
          settings: {},
        };
      }
      return {
        fetchUserInfo,
        settings: {},
      };
    }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR6aOe5oms5oms_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR6aOe5oms5oms_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/44df7b41b91b4e51808c40559b6010ae.png

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 Antd Pro 路由转发redirect

Antd Pro 路由转发redirect 1.问题 2. 我的配置（错误的） 3.修改后的配置 4.总结 1.问题使用`AntdPro

骑猪看日落/ 2023年10月05日 21:49/ 0 赞/ 38 阅读

相关从零开始搭建antd design pro项目

> 本文介绍如何重零开始搭建基于react的antd design pro项目。从多零开始呢？重刚装好操作系统开始。 > react是三大前端框架，antd desig

淩亂°似流年/ 2023年05月29日 05:21/ 0 赞/ 15 阅读

相关 antd踩坑记录

1、antd DatePicker使用过程中出现value.locale is not a function问题解决办法点击某一个datepicker，自动设置另外

阳光穿透心脏的1/2处/ 2022年12月20日 03:27/ 0 赞/ 216 阅读

相关 antd pro v5页面加载执行

import React, { useState, useEffect } from 'react'; import { PageContainer } fro

墨蓝/ 2022年09月15日 12:22/ 0 赞/ 92 阅读

相关 antd pro v5 记录

登录后获取用户信息 umi 使用models结合app.tsx中getInitialState方法绑定，请求用户信息接口。promise回传登录页。 login.tsx

爱被打了一巴掌/ 2022年09月15日 11:47/ 0 赞/ 10 阅读

相关 AntD Pro V5打包配置-不同API请求

config/host.ts console.log('process.env@：', process.env) console.log('REACT_APP

亦凉/ 2022年09月15日 00:08/ 0 赞/ 55 阅读

相关 antd pro _this.load is not a function

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

喜欢ヅ旅行/ 2022年09月11日 10:17/ 0 赞/ 179 阅读

相关 MX Player Pro v1.10.5.1 破解专业版

新版变化 v1.10.5.1正式版更新日志：2018-08-22 ·修复由于网络问题，当播放失败时显示网络错误。 ·修复魅族设备的音量控制问题 ·解决Andro

╰半夏微凉°/ 2022年05月21日 03:48/ 0 赞/ 152 阅读

相关 sequelize V5 升级记录

最近把项目中的 sequelize 由 `4.38.0` 升级到了 `5.8.7`，以下是升级记录本文地址: [shanyue.tech/post/sequel…][sha

妖狐艹你老母/ 2022年01月12日 00:09/ 0 赞/ 235 阅读

相关 antd-pro中控制loading的dva-loading使用(React)

前言：我们原来写loading状态的方法是，在异步请求的开始的时候开启loading，在异步请求的结束关闭loading，这样的写法是比较麻烦的，因为这个操作都是一

Dear 丶/ 2021年11月10日 16:06/ 0 赞/ 1323 阅读