React实现简单路由鉴权的小思路

最近在做毕设，其中后台管理是使用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('退出成功')}

演示

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！