react 项目taken失效跳转到登陆页如何实现
时间: 2024-05-12 07:21:18 浏览: 13
在 React 项目中,可以使用 React Router 来实现路由跳转功能。具体实现步骤如下:
1. 在 App.js 中定义路由
```jsx
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './Login';
import Home from './Home';
function App() {
return (
<Router>
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Home} />
</Switch>
</Router>
);
}
export default App;
```
在路由中定义了两个页面,即登录页 Login 和主页 Home。
2. 在需要跳转的组件中引入 useHistory
```jsx
import { useHistory } from 'react-router-dom';
function SomeComponent() {
const history = useHistory();
const handleLogout = () => {
// 在这里处理退出登录逻辑,例如清除本地存储等操作
localStorage.removeItem('token');
// 跳转到登录页
history.push('/login');
};
return (
<div>
<button onClick={handleLogout}>退出登录</button>
</div>
);
}
```
在需要跳转到登录页的组件中,可以引入 useHistory hook,并使用 history.push() 方法来实现路由跳转。
3. 在需要验证登录状态的组件中添加检查逻辑
```jsx
import { Redirect } from 'react-router-dom';
function SomeProtectedComponent() {
const token = localStorage.getItem('token');
if (!token) {
// 如果没有登录,则跳转到登录页
return <Redirect to="/login" />;
}
// 如果已登录,则显示对应内容
return (
<div>
<h1>已登录</h1>
</div>
);
}
```
在需要验证登录状态的组件中,可以通过检查本地存储中是否有 token 来判断用户是否已经登录。如果没有登录,则可以使用 Redirect 组件来实现自动跳转到登录页。