前端实现根据登录用户不同登录不同界面的代码
时间: 2023-05-18 20:02:41 浏览: 94
这个问题可以通过前端框架来实现,比如React、Vue等。具体实现方式可以通过以下步骤来完成:
1. 在登录页面获取用户信息,比如用户名、角色等。
2. 根据用户角色,使用条件渲染来展示不同的界面。
3. 在组件中使用路由来跳转到不同的页面。
以下是一个简单的React代码示例:
```
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
const App = () => {
const [user, setUser] = React.useState(null);
const handleLogin = (username, password) => {
// 登录逻辑
setUser({ username, role: 'admin' });
};
return (
<Router>
<Switch>
<Route path="/login">
<LoginPage onLogin={handleLogin} />
</Route>
<PrivateRoute path="/admin" user={user} component={AdminPage} />
<PrivateRoute path="/user" user={user} component={UserPage} />
<Redirect to="/login" />
</Switch>
</Router>
);
};
const LoginPage = ({ onLogin }) => {
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const handleSubmit = (event) => {
event.preventDefault();
onLogin(username, password);
};
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
</label>
<label>
Password:
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
</label>
<button type="submit">Login</button>
</form>
);
};
const PrivateRoute = ({ user, component: Component, ...rest }) => {
return (
<Route
{...rest}
render={({ location }) =>
user ? (
<Component />
) : (
<Redirect
to={{
pathname: '/login',
state: { from: location },
}}
/>
)
}
/>
);
};
const AdminPage = () => {
return <div>Admin Page</div>;
};
const UserPage = () => {
return <div>User Page</div>;
};
export default App;
```
在这个示例中,我们定义了一个App组件,它包含了一个用户状态(user)和一个登录方法(handleLogin)。在渲染过程中,我们使用了React Router来定义了三个路由:/login、/admin和/user。其中,/login路由渲染了一个LoginPage组件,用于用户登录。/admin和/user路由则分别渲染了一个AdminPage和一个UserPage组件。在渲染这两个组件时,我们使用了PrivateRoute组件来进行权限控制。如果用户未登录,则会重定向到/login页面。
以上