React封装高阶组件实现路由权限的控制详解

这篇文章主要介绍了React封装高阶组件实现路由权限的控制,在React中,为了实现安全可靠的路由权限控制,可以通过多种方式来确保只有经过授权的用户才能访问特定路径下的资源,下面来介绍封装高阶组件控制的方法,需要的朋友可以参考下

React高阶组件是什么

官方解释∶

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

高阶组件（HOC）就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，它只是一种组件的设计模式，这种设计模式是由react自身的组合性质必然产生的。我们将它们称为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。

HOC的优缺点

优点∶ 逻辑复用、不影响被包裹组件的内部逻辑。缺点∶hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖

路由权限控制做什么

主要就是判断用户是否登陆，只有登陆获取到有效的token，才能跳转到页面。

思路：

判断是否有 token ，如果有 token 则返回正常的组件，如果没有 token 则跳转到登陆页。

实现：

因为是ts所以先定义参数类型，这里的ReactElement代表的是一个 React 元素例如：<div/> 或者是组件。之后我们获取到 token ，通过 token 的有无判断跳转到相应页面。

代码

封装高阶组件：

interface AuthRouteProps {  children: React.ReactElement;}export function AuthRoute({ children }: AuthRouteProps) {  const token = getToken();  if (token) {    return <>{children}</>;  } else {    // 使用 Navigate 组件进行导航    message.error("请先登录");    return <Navigate to="/login" />;  }}

在路由配置文件中，引入封装的组件，例如：

children: [      {        index: true,        element: <Chat />      },      {        path: '/paint',        element: (          <AuthRoute><Paint /></AuthRoute>        )      },      {        path: '/me',        element: <div>我的</div>      }    ]

缺点

目前只是通过判断 token 有无，如果 token 失效了却还是会跳转，如果是跳转到的页面需要携带token 则可以在响应拦截器中进行处理：token 会发给后端，后端通过解密后来判断用户是否存在

// 添加响应拦截器request.interceptors.response.use(  function (response) {    // 2xx 范围内的状态码都会触发该函数。    // 对响应数据做点什么    return response.data;  },  function (error) {    // 超出 2xx 范围的状态码都会触发该函数。    // 对响应错误做点什么    if(error.status === 401){      removeToken()      router.navigate('/login')      window.location.reload()    }    return Promise.reject(error);  });

如果只是单纯的跳转页面的话要进行改造也是发一个请求给后端，后端通过处理返回给前端 token 是否有效：

export async function AuthRoute({children}){  const token = getToken();  // 模拟请求发给后端token  const res = await getUserInfo({ token });  if (res.data.code) {    return <>{children}</>;  } else {    return <Navigate to="/login" replace />;  }}

所以要通过具体的业务来处理用户登陆和 token 是否有效。