受保护路线的最佳实践？ [重复]

Question

我创建了一个ProtectedRoute组件：

import { getItem } from '~/utils/cookie';
import { ElementType } from 'react';
import { Navigate } from 'react-router-dom';

export const ProtectedRoute = ({
  element: Component,
  ...rest
}: {
  element: ElementType;
}) => {
  const token = getItem('token');

  return token ? <Component {...rest} /> : <Navigate to="/login" />;
};

export const getItem = (key: Key) => Cookies.get(key);

ProtectedRoute组件的使用：

{
  path: '/profile',
  element: <ProtectedRoute element={UserProfile} />
}

你有什么看法，如何正确处理用户是否登录，同时让代码执行非常快且安全，让你感觉不到检查？

另外，作为一个选项，我曾经调用上下文来解码 JWT 令牌，并验证它是否在其中找到用户 ID。我放弃了调用上下文，因为它需要多花几毫秒的时间，而且有时加载页面似乎有问题。

Answer 1

我可以推荐使用 react-router-dom 中的 useRoutes

钩子的方法

这是修改您的方法的解决方案 -

路由器.js

import { getItem } from '~/utils/cookie';
import { Navigate } from 'react-router-dom';

/** Add your public routes here */
const publicRoutes = [
  ...[
    { path: '/', component: Login },
    { path: '/login', component: Login },
    { path: '/sign-up', component: Signup },
  ].map((child) => ({
    path: child.path,
    element: <child.component />,
  })),
  { path: '*', element: <Navigate to="/" replace /> },
];

/** Add your private routes here */
const privateRoutes = [
  ...[
    { path: '/', component: Dashboard },
    { path: '/dashboard', component: Dashboard },
  ].map((child) => ({
    path: child.path,
    element: <child.component />,
  })),
  { path: '*', element: <Navigate to="/" replace /> },
];

const Router = () => {
  const token = getItem('token');

  const routing = useRoutes(token ? privateRoutes : publicRoutes);

  return routing;
};

export default Router;

您还可以添加延迟加载并在此基础上进行布局，并且可以完美地工作。我已经在 20 多个生产就绪的应用程序中使用了这种方法，到目前为止我还没有收到任何抱怨。