❤React体系优化（番外篇）

1、优化登录提示

现在我们的接口是当用户未进行登录的时候，不论是在前台还是后台，均只有一个提示，但是其他的什么也没有

我们思路应该是：

如果在需要登录的页面之中，那么让用户去登录页面；如果在开放页面，那么只是给用户进行一个简单的弹窗，这个时候用户应该可以取消弹窗，去浏览这种开放式页面

想要更改成这种方式，那么我们就需要去更改我们的权限判定，然后我们利用一下antd，再给我们添加游一些提示信息，让用户可以去重新登录

src\utils\request.js 更改我们的文件权限部分

这里我们更改一下我们的响应拦截器

// 响应拦截器
service.interceptors.response.use(
  (res) => {

    // 在响应数据返回之前做一些处理
    const code = res.data.code;
    console.log(code,'code');
    // return res.data;
    // 判断响应状态码
    switch (code) {
      case 200:
        return res.data;
      case 401:
        // api.open({
        //   message: '账号登录有效期提示！',
        //   description:
        //     '您的登录状态已过期，请重新登录！正在前往登录页面...',
        //   duration: 1000,
        // });
       
       window.location.href = '/login';
        // 跳转到登录页面
        break;
      case 403:
        // 跳转到登录页面
        window.location.href = '/login';
        break;
    }
    // 在响应数据返回之前做一些处理
    // return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在我们的接口返回401 未授权的时候就直接跳转

再次请求一下，已经成功！

2、项目外观优化

（1） 布局按钮间隔优化

这里我们发现出现了一种情况，这种是怎么回事呢，联想到我们之前正常，所以考虑是不是后来框架改动发生的问题】

之前我们这边的写法是这样子的

我们先去掉content 看看

结果显示我们这块已经正常了，这个时候我们就可以联想到是样式处理的问题

 const contentStyle: React.CSSProperties = {
    textAlign: 'center',
    minHeight: 280,
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#f6f6f6',
    margin: '24px 16px',
    padding: 0,
    flex: 'auto', // 让右侧块元素自动填充剩余宽度
  };

更改一下我们布局上的样式

 const contentStyle: React.CSSProperties = {
    textAlign: 'left',
    minHeight: 280,
    color: '#fff',
    backgroundColor: '#f6f6f6',
    margin: '24px 16px',
    padding: 0,
    flex: 'auto', // 让右侧块元素自动填充剩余宽度
  };

问题处理完成！

（2） 布局更改以后布局优化

写权限管理的时候我们突然发现了一个事，就是我们分页压根看不到，这肯定是因为我们布局更改使用antd推荐的以后导致的，那接下来我们优化一下这部分

先来看看我们的顶部和底部的高度，顶部64 ，这是antd为我们推荐的最合适的大小，那么显然，底部也是，不是也得是，毕竟本着对称设计的原理啊

也就是说，我们中间最大高度就是calc(100vh - 64px -64px)，加个高度到中间上

 maxHeight: 'calc(100vh - 128px)', // 设置内容的最大高度为屏幕高度减去头部高度
 overflowY: 'auto', // 当内容超出容器时，自动显示滚动条

ok ！

3、封装退出登陆以及标头下拉，增加去往前台主页PC

1、topMenu栏的封装

接下来我们封装一下我们的布局顶部的部分，也就是这部分的内容，帮助用户更加方便的管理后台

也就是我们要在这一块为用户增加合适的功能项

这里我们先稍微更改一下我们的布局，让用户的体验更加的良好一些，稍微往我们的两边先加一些间隔部分

然后我们看看我们更改的的部分

接下来我们先在我们的右侧增加一个头像

在我们的头部之中写入我们的消息组件，可以看到

然后布局一下我们的样式

 <div className="flex">
          <div className="w-1/2  flex-grow   ">
            <Button
              type="primary"
              onClick={toggleCollapsed}
              style={{
                marginBottom: 16,
              }}
            >
              {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button>
          </div>
          <div className="w-1/2  flex-grow  flex ">
            <div className='w-3/5'></div>
            <div className='w-1/5'>
              登陆人：
            </div>
            <div className='w-1/5'>
              <Space size={24}>
                <Badge count={1}>
                  <Avatar shape="square" icon={<UserOutlined />} />
                </Badge>
              </Space>
            </div>
          </div>
 </div>

最终看一下我们的效果

加入我们的下拉框

// 引入我们的组件部分
import { Button, Layout, Menu,Dropdown, Avatar, Badge, Space } from 'antd';


//添加我们的菜单
const menu = (
  <Menu onClick={handleMenuClick}>
  <Menu.Item key="profile">个人资料</Menu.Item>
  <Menu.Item key="settings">设置</Menu.Item>
  <Menu.Divider />
  <Menu.Item key="logout" icon={<LogoutOutlined />}>退出登录</Menu.Item>
</Menu>
);


//写一下我们的菜单结构
<Dropdown overlay={menu} placement="bottom">
   <Avatar size="large" icon={<UserOutlined />} />
 </Dropdown>

最后查看一下我们的实现效果

完善一下我们的逻辑部分，主要是处理我们的退出登陆部分

const handleMenuClick = (e) => {
  if (e.key === 'logout') {
    // 处理退出逻辑
  } else if (e.key === 'settings') {
    // 处理设置逻辑
  }
};

填充一下我们之前在redux之中定义的退出登陆部分，格外注意上面的redux的正确引入

import { useSelector, useDispatch, connect } from 'react-redux';
import { logoutSuccess } from '@/store/reducers/authSlice';


  const handleMenuClick = (e) => {
    if (e.key === 'logout') {
      // 处理退出逻辑
       // 更新登录状态和 Token
       dispatch(logoutSuccess());
       // 跳转到主页
        window.location.href = '/pc';
    } else if (e.key === 'settings') {
      // 处理设置逻辑
    }
  };
  

这个时候我们发现给我们这个提示，接下来我们解决一下这个提示：

warning.js:30 Warning: [antd: Dropdown] overlay is deprecated. Please use menu instead.

意思就是说 overlay属性已经被弃用，应该使用menu属性代替

4、配置加载进度条 NProgress

之前我们的项目之中一直有一个五颜六色的加载进度条，不少读者可能都注意到了

接下来我们就像Vue 项目一样增加一下这个加载进度条

（1）安装 NProgress

yarn add nprogress

（2）在应用中使用 NProgress

在 src\utils\request.js 之中引入

import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; // 导入进度条样式


NProgress.start(); // 开始加载时显示进度条
NProgress.done(); // 加载完成时隐藏进度条

（3）优化一下

根组件进行加载和卸载

在 React 应用的全局布局组件中使用 NProgress

useEffect(() => { NProgress.configure({ showSpinner: false });
// 配置NProgress，这里禁用了进度条旁边的小圆圈 
return () => { NProgress.remove(); 
// 组件卸载时移除NProgress 
}; 
}, []);

看看效果