我要评论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 是否有效。
比较
通过这样的方式写和直接在访问页面中判断token有什么区别？
直接在访问页面时判断：这种方式通常是在页面组件加载或渲染时进行的，即在用户已经导航到该页面后才进行检查。
使用authroute组件：判断是在路由跳转之前进行的。当用户尝试访问受保护的路由时，authroute组件会首先检查token，然后决定是否允许访问或进行重定向。
以上就是react封装高阶组件实现路由权限的控制详解的详细内容，更多关于react路由权限控制的资料请关注代码网其它相关文章！
发表评论