❤ React-获取登陆用户信息

1、获取用户信息

接下来我们获取用户信息拿到用户相关的信息，这个页面我们应该写到首页，方便进行弹窗登录！

用户的信息接口

export function getInfo () {
  return request({
    url: '/api/getInfo',
    method: 'get',
  })
}

引入和使用

import { getInfo } from '@/api/common/comon';

const [userinfo,setUserinfo]=React.useState({});

const getUserInfo = () => {
    console.log('获取用户信息');
    getInfo().then(res => {
        console.log(res,'获取用户信息');
        setUserinfo(res.data);
    })
}

useEffect(() => {
    console.log('useEffect-home');
    getUserInfo();
},[])

优化用户检测部分

我的想法是，当用户有token并且登录网站的时候，可以直接让用户共享登录，不需要额外在项目之中进行切换，这个时候就需要改造一下砸门的接口拦截权限

接下来我们对应请求拦截器做一些更改

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理，例如添加 token 等
    const token = localStorage.getItem('token');
    const requestPath = config.url;
    // 检查请求路径是否有token    是否在白名单中
    if(token){
      config.headers.Authorization = `Bearer ${token}`;
    }else if (!whiteapilist.includes(requestPath)) {
      // 如果请求不在白名单中且存在 token，则将 Authorization 头部添加到请求中
      config.headers.Authorization = `Bearer ${token}`;
    }else if(whiteapilist.includes(requestPath)){
      console.log('白名单接口，无需验证');
    }else{
      // 跳转到登录页面
      window.location.href = '/login';
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
    // 跳转到前台页面
    window.location.href = '/';
  }
);

更改以后可以看出，当用户未登录的时候，也可以对网站进行访问，并且可以对用户信息接口进行请求，由于没有token，这个时候没办法拿到用户信息，但是用户登录以后，直接就可以显示用户信息之类的方式显示当前登录用户的相关信息。

2、完善用户提示

我们想要实现的部分是：

当用户在首页的时候，会自动弹窗，用户可以选择暂不登录、去登录、去注册部分（后续还会集成微信扫码登录之类的方便与我们扩展）

我们先在这个界面进行一下相关的完善src\pages\Home.tsx

这里我们先使用Ant Design（antd）编写一个包含暂不登录、去登录和去注册功能的弹窗来实现

import { Modal, Button } from 'antd';
定义用户是否登录状态
const [isLoginVisible,setLoginVisible] = React.useState(false);

//手写一下我们的弹窗

const CustomModal = ({ visible, onCancel, onLogin, onRegister }) => {
    return (
      <Modal
        title="窗口提示"
        open={visible}
        onCancel={onCancel}
        footer={[
            <div className="flex justify-center">
                <button key="register" onClick={onRegister} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">去注册</button>
                <button  key="login" onClick={onLogin} className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mx-2">去登录</button>
                <button key="not-login" onClick={onCancel} className="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded ml-2">暂不登录</button>
            </div>
          ]}
      >
        <div className="text-xl font-bold text-center bg-gradient-to-b from-blue-500 to-purple-600 bg-clip-text text-shadow-md">
            请选择您的操作
        </div>
      </Modal>
    );
};
//完善一下我们弹窗的内容部分
const handleCancel = () => {
    setLoginVisible(false);
};
const handleLogin = () => {
    // 处理去登录的逻辑
    setLoginVisible(false);
    // 跳转或者其他操作
};

const handleRegister = () => {
    // 处理去注册的逻辑
    setLoginVisible(false);
    // 跳转或者其他操作
};

预览一下我们刚刚写好的弹窗部分

接下来完善一下弹窗显示时机以及我们的跳转部分

const handleCancel = () => {
        setLoginVisible(false);
};
const handleLogin = () => {
    // 处理去登录的逻辑
    setLoginVisible(false);
    // 跳转或者其他操作
    navigate('/login');
};

const handleRegister = () => {
    // 处理去注册的逻辑
    setLoginVisible(false);
    navigate('/register');
    // 跳转或者其他操作
};

测试一下没问题

3、优化用户写法TS的使用

在这里我们想要使用一下判断，在接口返回code为200的情况下在进行正确的提示，而错误提示就直接给弹窗出来，所以我们优化一下

 if(res.code==200){
                // 登录成功
                console.log('登录成功');
                alert('登录成功');
    }else{
        // 登录失败
        console.log('登录失败');
        alert('登录失败');
    }

这里我们会发现弹窗报错了，给了我们一个警告！

这是TS的一个报错，意思就是我们的返回上并不存在着code，所以我们需要采用TS的写法

interface apiResponseType {
        code?: number;
        data:any
        // 其他属性...
    }

    // 获取用户信息
    const getUserInfo = () => {
        console.log('获取用户信息');
        getInfo().then((res: apiResponseType) => {
          console.log(res, '获取用户信息');
          if (res.code === 200) {
            setLoginVisible(false);
            // 登录成功
            setUserinfo(res.data);
            console.log('登录成功');
            alert('登录成功');
          } else {
            // 登录失败
            console.log('登录失败');
            alert('用户暂未登陆');
            setLoginVisible(true);
          }
        }).catch((error) => {
          // 处理错误
          console.error(error);
        });
  }

接下来会发现已经按照我们的想法实现了，用户没有登陆的时候，会提示我们登陆，而用户登陆以后，会自动货获取到用户的信息