用react写一个登录拦截
时间: 2023-08-04 07:32:57 浏览: 49
好的,下面是一个使用 React 实现的登录拦截示例:
首先,我们需要使用 React Router 来创建路由。在 App.js 中,我们需要定义两个路由:一个用于登录页面,一个用于需要登录才能访问的页面。
```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import LoginPage from './LoginPage';
import ProtectedPage from './ProtectedPage';
function App() {
const isLoggedIn = false; // 根据实际情况设置是否已登录的状态
return (
<Router>
<Route exact path="/" render={() => <Redirect to="/login" />} />
<Route path="/login" component={LoginPage} />
<Route
path="/protected"
render={() =>
isLoggedIn ? (
<ProtectedPage />
) : (
<Redirect to="/login" />
)
}
/>
</Router>
);
}
export default App;
```
在上面的代码中,我们定义了两个路由:/login 和 /protected。/login 路由对应 LoginPage 组件,/protected 路由对应 ProtectedPage 组件。我们还定义了一个名为 isLoggedIn 的布尔状态,用于记录用户是否已登录。在 /protected 路由中,我们使用了 render 属性来渲染组件,而不是使用 component 属性。这是因为我们需要根据 isLoggedIn 状态来动态渲染组件。如果用户已登录,我们渲染 ProtectedPage 组件;否则,我们将用户重定向到 /login 路由。
接下来,我们需要实现 LoginPage 组件。这里只是一个简单的示例:
```javascript
import React from 'react';
function LoginPage() {
return (
<div>
<h1>Login Page</h1>
<form>
<label>
Username:
<input type="text" name="username" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
<button type="submit">Login</button>
</form>
</div>
);
}
export default LoginPage;
```
最后,我们需要实现 ProtectedPage 组件。这里只是一个简单的示例:
```javascript
import React from 'react';
function ProtectedPage() {
return (
<div>
<h1>Protected Page</h1>
<<p>You are logged in!</p>
</div>
);
}
export default ProtectedPage;
```
上面的代码只是一个简单的示例,实际情况中需要根据实际需要进行更改和完善。