react 路由鉴权方案

知夏__

已于 2023-11-13 15:55:15 修改

阅读量595

点赞数

CC 4.0 BY-SA版权

分类专栏：日常开发排查文章标签： react.js javascript ecmascript

于 2023-06-13 21:41:24 首次发布

本文链接：https://blog.youkuaiyun.com/libocsdn_lean/article/details/131196844

日常开发排查专栏收录该内容

2 篇文章

订阅专栏

文章介绍了三种在React应用中处理登录状态和路由鉴权的方法：一是通过创建Context并广播用户登录状态；二是利用localStorage保存登录状态并组合组件；三是路由前拦截器进行权限检查。这些策略可以单独使用，也可结合使用，以确保用户访问权限的安全控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路一：

1、广播用户登录状态。
2、在路由中消费状态，选择跳转，实现路由鉴权。

请求响应接口处，主要是用于提醒用户登录状态失效，路由鉴权用于跳转登录。

//基础部分
import React, { useContext, useState } from "react";
/**
 * 创建context
 */
const ContextValue = React.createContext();

/**
 * 输出组件
 */
const Auth = () => {
  const [auth_state, setAuthState] = useState(false);
  const logIn = () => {
    // 模拟登录操作 
    setTimeout(() => {
      setAuthState(true);
    }, 200);
  };
  const logOut = () => {
    // 模拟登出操作
    setTimeout(() => {
      setAuthState(true);
    }, 200);
  };
  return {
    auth_state,
    logIn,
    logOut,
  };
};

/**
 *  设置 发布者,一般包裹根组件
 */
export const AuthProvider = ({ children }) => {
  const auth = Auth();
  return <ContextValue.Provider value={auth}>{children}</ContextValue.Provider>;
};
/**
 * 消费者 获取登陆状态 | 设置登录 | 设置登出
 */
export const CosumerAuth = () => useContext(ContextValue);
/**
 * 包裹需要的组件，或者相关路由
 */
export const RequireAuth = props => {
  const { auth_state } = CosumerAuth();
  return auth_state === true ? "已登陆" : "跳转登陆组件去登录";
};

实现思路二：

用浏览器存储如localStorage保存登录状态，组合成组件，包裹路由

/**
*  RequireAuth 组件相当于一个拦截器，是否返回被拦截的组件要听他的
*/
export const RequireAuth = ({ children }) => {
  const authed = localStorage.getItem('login');
  return authed === 'true' ? ( 
    children
  ) : (
    <Navigate to="/user" replace />
  );
}

思路三：

在渲染路由之前做一个拦截器，判断

1、访问登录页，有token，去主页。

2、访问其他页，无token，去登录页。

3、正常渲染。

const ToPage1 = () => {
  const navigateTo = useNavigate();
  useEffect(() => {
    navigateTo("/page1");
    message.warning("您已经登陆过了！");
  }, []);
  return <></>;
};
const ToLogin = () => {
  const navigateTo = useNavigate();
  useEffect(() => {
    navigateTo("/login");
    message.warning("请登陆后再访问！");
  }, []);
  return <></>;
};
/**
 * 路由拦截
 */
const BeforeRouterEnter = () => {
  const outlet = useRoutes(routes);
  let token = localStorage.getItem("lege-token");
  const location = useLocation();
  // 访问登陆页并且有token
  if (location.pathname === "/login" && token) {
    return <ToPage1 />;
  }
  // 访问其他页并且没有token， 去登陆
  if (location.pathname !== "/login" && !token) {
    return <ToLogin />;
  }
  return outlet;
};
const App = () => {
  return (
    <div className="App">
      <BeforeRouterEnter />
    </div>
  );
};

export default App;

以上几种方式，也可以根据实际情况结合使用！结合redux，后端，用于各类状态的判定