实现思路一:
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,后端,用于各类状态的判定