react 路由鉴权

react 路由鉴权

这里暂用登录状态做类比

实现思路一：

利用发布订阅者模式，将用户登录状态广播，路由中消费状态，选择跳转，实现路由鉴权。

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

代码实现如下：

//基础部分
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 {children};
};
/**
 * 消费者 获取登陆状态 | 设置登录 | 设置登出
 */
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
  ) : (
    
  );
}

思路三：

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

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 ;
  }
  // 访问其他页并且没有token， 去登陆
  if (location.pathname !== "/login" && !token) {
    return ;
  }
  return outlet;
};
const App = () => {
  return (
    

      
    
  );
};

export default App;

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