react.js - react 登录前后不同操作

问题描述

问 题

一个基于react的项目 登录前可以预览，不能评论，点赞，删除，收藏等操作，登录后可以。怎么在登录前控制操作元素和跳转的拦截？要弹出提示。登陆前后用的同一套组件，不仅涉及路由跳转，还包括组件里元素的一些操作。求大神指点！

解决方案

一切都是基于token／session验证的是不是呢？
那么可以这样做：

1. 需要用到redux+redux中间件如saga.js，用中间件监听所有的ajax

2. 最外一层的容器中，添加一个login组件，组件状态基于redux维护

3. 当你点击任意一个必须要登录后才可以操作的时候，saga监听并捕获error，判断error是否属于没有权限的错误

4. saga发起一个action，维护login组件，设置成显示状态，直接盖住最外一层容器z-index:999999，这里可以做一个动画效果，包括第5步隐藏时候

5. 用户登录完以后，saga发起action，隐藏组件并保存登录信息

6. 页面回到你登录前显示的状态

7. 如果是session或者token过期，还可以在saga里先发起一次自动登录，如果失败才显示login组件让用户登录

这篇关于react.js - react 登录前后不同操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！