antd pro v5 记录

爱被打了一巴掌 2022-09-15 11:47 19阅读 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 条评论，19人围观）

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

相关阅读

相关 antd pro ProForm 去除自动填充不生效

antd pro ProForm去除chrome自动填充不生效 -------------------- chrome对表单会自动填充，特别对 username、pas

亦凉/ 2023年10月05日 21:50/ 0 赞/ 59 阅读

相关 Antd Pro 路由转发redirect

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

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

相关 Antd-pro项目发布版本清缓存

利用webpack打包，对打包后的文件加hash值在antd-pro项目中，在config.js export default { ha

青旅半醒/ 2023年07月08日 02:41/ 0 赞/ 8 阅读

相关 antd踩坑记录

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

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

相关 nginx 部署antd_design_pro

偶尔翻到antd\_design\_pro 发现管理端做的还是可以的，虽然是后端的程序员，但是也要了解一下前端的一些知识，那么首选我们看看如何部署nginx 我们在网上很容易

﹏ヽ暗。殇╰゛Y/ 2022年10月09日 00:34/ 0 赞/ 11 阅读

相关 antd pro v5页面加载执行

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

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

相关 antd pro v5 记录

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

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

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

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

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

相关 antd pro _this.load is not a function

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

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

相关 sequelize V5 升级记录

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

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