【Umi】项目初始化配置和用户权限

app.tsx

tsx 复制代码
import { RunTimeLayoutConfig } from '@umijs/max';
import { history, RequestConfig } from 'umi';
import { getCurrentUser } from './services/auth';
import { message } from 'antd';

// 获取用户信息
export async function getInitialState(): Promise<{
  currentUser?: API.CurrentUser;
  fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
      const token = localStorage.getItem('token');
      if (!token) {
        return undefined;
      }
      const currentUser = await getCurrentUser();
      return currentUser;
    } catch (error) {
      history.push('/login');
      return undefined;
    }
  };

  // 如果不是登录页面,执行
  const { location } = history;
  if (location.pathname !== '/login' && location.pathname !== '/register') {
    const currentUser = await fetchUserInfo();
    return {
      currentUser,
      fetchUserInfo,
    };
  }
  return {
    fetchUserInfo,
  };
}

// 布局配置
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  return {
    logo: 'https://img.ixintu.com/download/jpg/20200909/a27a8cb1fb9d6dbaf2bbaff07b6e4800_512_512.jpg!bg',
    menu: {
      locale: false,
    },
    rightContentRender: () => <div></div>,
    avatarProps: {
      src: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
      title: initialState?.currentUser?.name || initialState?.currentUser?.username,
      render: (_, avatarChildren) => {
        return <div>{avatarChildren}</div>;
      },
    },
    footerRender: () => <div style={{ textAlign: 'center', padding: '20px' }}>霹雳舞比赛管理系统 ©2025</div>,
  };
};

// 请求配置
export const request: RequestConfig = {
  timeout: 10000,
  errorConfig: {
    adaptor: (resData: any) => {
      return {
        ...resData,
        success: resData.success,
        errorMessage: resData.message,
      };
    },
  },
  requestInterceptors: [
    (config: any) => {
      const token = localStorage.getItem('token');
      if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
      }
      return config;
    },
  ],
  responseInterceptors: [
    (response) => {
      return response;
    },
  ],
};

access.ts

ts 复制代码
export default function access(initialState: { currentUser?: API.CurrentUser }) {
  const { currentUser } = initialState || {};
  
  return {
    isAdmin: currentUser && currentUser.role === 'admin',
    isJudge: currentUser && currentUser.role === 'judge',
    isCompetitor: currentUser && currentUser.role === 'competitor',
    isStaff: currentUser && currentUser.role === 'staff',
  };
} 
相关推荐
我笑了OvO9 分钟前
C++类和对象(1)
java·开发语言·c++·类和对象
渡我白衣2 小时前
C++ 异常处理全解析:从语法到设计哲学
开发语言·c++·面试
悦悦子a啊3 小时前
[Java]PTA: jmu-Java-02基本语法-08-ArrayList入门
java·开发语言·算法
毕设源码-郭学长4 小时前
【开题答辩全过程】以 PHP茶叶同城配送网站的设计与实现为例,包含答辩的问题和答案
开发语言·php
光影少年4 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
JavaPub-rodert5 小时前
用 go-commons 打造更优雅的字符串处理工具
开发语言·后端·golang
Archie_IT5 小时前
嵌入式八股文篇——P1 关键字篇
c语言·开发语言·单片机·mcu·物联网·面试·职场和发展
workflower6 小时前
将图片中的图形转换为可编辑的 PPT 图形
java·开发语言·tomcat·powerpoint·个人开发·结对编程
ftpeak6 小时前
《WebAssembly指南》第九章:WebAssembly 导入全局字符串常量
开发语言·rust·wasm
卡戎-caryon6 小时前
【Java SE】06. 数组
java·开发语言