# react-blog

**Repository Path**: yimeng99/react-blog

## Basic Information

- **Project Name**: react-blog
- **Description**: react-blog 
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-25
- **Last Updated**: 2025-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-blog

#### 介绍
react-blog 

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)



```shell
# 安装 normalize.css 统一所有浏览器样式
pnpm i normalize.css
# 同时引入 reset.css 文件用来统一浏览器样式
```


## 路由守卫校验
我自己是实现了一个路由校验的方法，当我们的 `页面路径` 和 `token` 发生变化的时候，就会调用 `checkLogin()` 方法，去校验是否有可以路由到这个页面，
但是他有个弊端，我称他为 `后觉性`，也就是说，当我们刷新页面时页面会正常的进行跳转，但是会触发我们的检测函数，此时目标页面
就会晃一下，然后跳转到我们的最终页面。

```tsx
function App() {

    // 白名单
    const whiteList = ['/login', '/qrCodeLogin']
    // 这里可以做路由守卫
    // 判断是否登录，没有登录就跳转登录页
    const {token, userInfo} = useSelector((state: any) => state.user)
    const dispatch = useDispatch()
    // 对路由 url 的监听
    const location = useLocation()
    const navigate = useNavigate()
    const [loading, setLoading] = useState(false)

    const [routerList, setRouterList] = useState<any>([])

    // 
    const checkLogin = (token: string, location: any) => {
        const activePath = location.pathname
        const isLogin = !!token
        if (!isLogin) {
            // 未登录 在白名单中，放行
            if (whiteList.includes(activePath)) return
            globalMessageApi.warning("未登录, 请先登录!")
            // 跳转到登录页
            navigate("/login", {replace: true})
        } else {
            // 已经登录了， 获取自己的信息，获取路由表信息
            console.log("已经登录了", userInfo)
            if (isEmpty(userInfo)) {
                // 获取当前登录用户信息，再获取路由表信息
                console.log("获取当前登录用户信息，再获取路由表信息")
                getUserInfoUrl().then((res: any) => {
                    setUserInfo(res.user)
                    getRoutersUrl().then((res: any) => {
                        const _routerList = createRouters(res.data)
                        dispatch(setDefinedRouter(res.data))
                        setRouterList(_routerList)
                        console.log("最后生成的路由 routerList", _routerList)
                    })
                }).catch((err: any) => {
                    console.log("获取路由信息失败", err)
                })
            }
        }
    }


    useEffect(() => {
        try {
            setLoading(true)
            checkLogin(token, location)
        } finally {
            setLoading(false)
        }
    }, [token, location])


    const {antdTheme} = useTheme()
    return <>
        <SysErrorBoundary>
            <ConfigProvider locale={zhCN}
                            componentSize={'middle'}
                            theme={antdTheme}
            >
                <OtherOP/>
                {useRoutes(createRouters(constantRoutes))}
                {useRoutes(routerList)}
                <Suspense fallback={<FiveDotLoading/>}>
                    <Outlet/>
                </Suspense>
            </ConfigProvider>
        </SysErrorBoundary>
    </>
}

export default App
```

这样显然很不好，那么我们需要分析一下，我们希望通过 `js` 计算后直接路由到我们想要的页面。
对此我封装了一个组件 `AuthRouter` 他可以实现我们需要的功能
```tsx
// 路由守卫
// 判断token是否存在（如果存在跳转主页，如果不存在跳转登录页面）
import { Navigate } from "react-router-dom"
 
// 获取token方法
const getToken = () => {
    return localStorage.getItem("token")
}
 
 
 
// 创建一个高阶组件，高阶组件就是 把一个组件当做另一个组件的参数传入 然后通过判断 返回新的组件
// 下面的 AuthRouter 就是一个高阶组件
function AuthRouter( {children} ) {
    // 获取token
    const token = getToken()
    console.log(token,"agagag");
    // 判断token是否存在 存在直接渲染主页面
    if (token) {
        return <>{children}</>
    } else {
        return <Navigate to={'/login'}></Navigate>  //没有token跳转登录页面
    }
}
export { AuthRouter }
```

```tsx
import { AuthRouter } from "./AuthRouter"  //引入高阶组件
import Login from "../pages/Login"
import Home from "../pages/Home"

const router = [
    {
        path: "/",
        element: <AuthRouter>
            <Home />
        </AuthRouter>
    },
    {
        path: "/login",
        element: <Login></Login>
    },
    {
        // 如果进/home页面, 进入 <AuthRouter/> 高阶组件进行判断，如果有token 返回 <Home/> 
        //没有token返回 <Navigate to={'/login'}></Navigate> 跳转登录页面
        path: "/home",
        element: <AuthRouter> 
            <Home />
        </AuthRouter>
    },
]
 
export default router
```


角色管理功能展示
![img.png](assets/img.png)