最近在做毕设,其中后台管理是使用React搭的,那么登录需要用到鉴权,但是React不像Vue,没有路由守卫等API,那么就需要自己实现,主流的是使用高阶组件封装一个含可配置路由表的路由组件,但是我这里提供另外一种实现小思路,但是不算合理,只适用于自己写来玩玩的项目,还请各位读者见谅。
在根组件的渲染的时候通过某个字段如是否已登录,我这里是authed,决定是否渲染组件或登录页
render() {
return this.state.authed ? (
/*根组件*/
) : <Login handleLogin={this.handleLogin}/>
}
然后登录组件接收根组件传过来的handleLogin函数,在提交表单并发送网络请求成功后触发即可(我这里用antd的Form表单组件,模拟发送网络请求成功,把用户信息存在sessionStroge中)
const onFinish = (values) => {
// 发送网络请求查找有无该用户
// axios.post('http://localhost:3001/api1/users/signin', {
// username: encodeURIComponent(values.username),
// password: CryptoJS.MD5(values.password).toString()
// }).then(({status, data}) => {
// if(status === 200){
// if(data && data.code === 0){
// // 保存已登录状态
// window.sessionStorage.setItem('isAuth', true)
// }else{
// message.error(data.msg)
// }
// }else{
// message.error('服务器出错')
// }
// })
window.sessionStorage.setItem('isAuth', values.username)
// 这里登录可以用sessionStroge保存
// 在父组件App挂载时判断有无
props.handleLogin()
};
父组件自身的handleLogin函数被触发,调用loadAuth函数
handleLogin = ()=>{
this.loadAuth()
message.success('登录成功')
}
loadAuth函数如下,当在sessionStroge能够拿到用户信息,说明用户已登录,修改authed值为true,并保存用户信息,否则跳转回登录页,提示用户先登录
loadAuth = ()=>{
// sessionStroge在浏览器刷新不会消除,等关闭时才消除,
// 所以刷新时可以先判断用户是否已登录
const authName = window.sessionStorage.getItem('isAuth')
if(authName){
this.setState({authed: true, authName})
}else{
if(window.location.pathname !== '/'){
window.location.pathname = '/'
}
message.error('请先登录')
}
}
退出登录的话反之即可,清除用户信息,修改authed值为false,重定向回登录页
handleLogout = ()=>{
window.sessionStorage.removeItem('isAuth')
this.setState({authed: false})
window.location.pathname = '/'
message.success('退出成功')
}
演示