У меня есть бэкэнд node.js, в котором есть логин / регистрация и несколько URL-адресов, к которым обращается их соответствующая роль.Например, я проверил этот URL-адрес http://localhost:5000/api/deleteuser:user_id, и этот URL-адрес доступен только пользователю с ролью «ADMIN» и другими маршрутами с таким же контролем доступа
в моем приложении реагировать с избыточностьюсоздать логин / регистр, который использует jwt, однако после того, как пользователь войдет в систему со своим именем пользователя и паролем, система направит его только на панель инструментовя хочу проверить роль пользователя, когда пользователь пытается войти в систему, чтобы, если он был администратором, система направляла его на страницу администратора или, если он был учителем, также на страницу учителя и т. д.
вВ тот момент, когда я пытаюсь понять, как я могу решить эту проблему.Я пытался использовать CASL для реакции, но я просто не мог понять это, поэтому вы можете помочь мне с этим, пожалуйста
заранее спасибо
Я пытался использовать CASL https://www.npmjs.com/package/@casl/react, ноЯ просто не мог этого понять.
export const userSignin = (userData, history) => {
return dispatch => {
axios.post('/api/signin', userData)
.then(res => {
//success message
toastr.success('Welcome')
//redirect to dashboard
//save token to location storage
const { token } = res.data;
localStorage.setItem('jwtToken', token);
//set token to auth header
setAuthToken(token);
//decode token
const jwtDecoded = jwtDecode(token);
if(res.data.role === 'admin'){
history.push('/admin');
}else{
history.push('/dashboard');
}
//set current user
dispatch(setCurrentUser(jwtDecoded));
})
.catch(error => dispatch({
type: GET_ERRORS,
payload: error.response.data
}))
}
}
class Signin extends React.Component {
state = {
username: '',
password: '',
usernameError: '',
passwordError: '',
errors: {}
}
handleUsername = (e) => {
this.setState({ username: e.target.value }, () => { this.validateUsername() });
}
handlePassword = (e) => {
this.setState({ password: e.target.value }, () => { this.validatePassword() });
}
validateUsername = () => {
const { username } = this.state;
let usernameError;
if (username === '') {
usernameError = 'Username is required';
}
this.setState({ usernameError });
return !usernameError;
}
validatePassword = () => {
const { password } = this.state;
let passwordError;
if (password === '') {
passwordError = 'Password is required';
}
this.setState({ passwordError });
return !passwordError;
}
handleSubmit = (e) => {
e.preventDefault();
const validUsername = this.validateUsername();
const validPassword = this.validatePassword();
if (validUsername && validPassword) {
const userData = {
username: this.state.username,
password: this.state.password
}
this.props.userSignin(userData, this.props.history);
}
}
componentDidMount() {
if (this.props.auth.isAuthenticated) {
// const role = this.props.role;
// if (role === "Admin") {
// this.props.history.push('/admin');
// } else {
// this.props.history.push('/dashboard');
// }
this.props.history.push('/dashboard');
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.auth.isAuthenticated === true) {
this.props.history.push('/dashboard');
}
if (nextProps.errors) {
this.setState({ errors: nextProps.errors })
}
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-sm-4 col-sm-offset-4">
{
this.state.errors.success === false ? <p className="text-danger text-center">{this.state.errors.message}</p> : null
}
</div>
<div className="col-sm-4 col-sm-offset-4">
<h3 className='text-center'>Login</h3>
<form onSubmit={this.handleSubmit}>
<div className={classnames('form-group', { 'has-error': this.state.usernameError })}>
<input
type="text"
className="form-control"
value={this.state.username}
onChange={this.handleUsername}
placeholder="Username"
/>
<span className="help-block">{this.state.usernameError}</span>
</div>
<div className={classnames('form-group', { 'has-error': this.state.passwordError })}>
<input
type="password"
className="form-control"
value={this.state.password}
onChange={this.handlePassword}
placeholder="Password"
/>
<span className="help-block">{this.state.passwordError}</span>
</div>
<button className="btn btn-success btn-sm">Login</button>
</form>
</div>
</div>
</div>
);
}
}
Signin.propTypes = {
auth: PropTypes.object.isRequired,
userSignin: PropTypes.func.isRequired
}
const mapStateToProps = (state) => {
return {
auth: state.auth,
errors: state.errors
}
}
export default connect(mapStateToProps, { userSignin })(withRouter(Signin));
exports.signin = (req, res) => {
User.findOne({ username: req.body.username }, function (err, user) {
if (err) throw err;
if (!user) {
res.status(401).json({ success: false, message: 'Auth failed,User not found' });
} else if (user) {
var validPassword = user.comparePassword(req.body.password);
if (!validPassword) {
res.status(401).json({ success: false, message: 'Auth failed,wrong password' });
} else {
var token = jwt.sign({
id: user._id,
username: user.username,
email: user.email,
password: user.password,
profileImage: user.profileImage,
created_at: user.created_at
}, config.secret, { expiresIn: '1h' });
res.status(200).json({ success: true, message: 'Authenticated', token: 'Bearer ' + token });
}
}
});
}
на данный момент это только направляет пользователя на панель инструментов, я думаю, что-то здесь не хватает