资讯专栏INFORMATION COLUMN

Redux 登录状态判断的一些实践

isLishude / 2511人阅读

摘要:高阶函数验证中间件验证验证之所以用三种方式一起是因为高阶函数在性能调优的时候并不是特别容易。总结高阶函数适合用在子控件需要确定权限后渲染中间件适合无状态页面中的登录状态判断验证,使用范围就比较狭窄了。

最近一直在写一个React、Redux的前端项目,登录状态验证这一块还是比较头疼的。

我的实践下有三种方式来验证用户登录状态,目前我选择用三种方式一起用在项目里面。

Redux高阶函数验证(High-Order Function)

Actions中间件验证

Component WillMount 验证

之所以用三种方式一起是因为Redux高阶函数在性能调优的时候并不是特别容易。

Redux高阶函数验证
//把需要登录状态验证的Component传入到这个高阶函数中
export function requireAuthentication(Component) {
    class AuthenticatedComponent extends Component {
        constructor(props) {
            super(props)
        }
        //只在首次Mount时来验证权限
        componentWillMount() {
            this.checkAuth();
        }
        checkAuth(){
            const {path,isSignIn,dispatch}=this.props;
            if(!isSignIn){
                //没有登录
                //记录当前页面path
                //跳转到SignIn Page处理登录 登录完成够会跳回当前页面
                dispatch(CommonActions.setNextUrl(path))
                browserHistory.push("/sign");
            }
        }
        render() {
            console.log("auth render")
            return (
                
{this.props.isSignIn == true ? : null }
) } } const mapStateToProps = (state) => ({ path:state.routing.locationBeforeTransitions.pathname, isSignIn:state.common.isSignIn, state:state }) return connect(mapStateToProps)(AuthenticatedComponent); }

你可以把它像这样用在router中:

{ path:"courseCate",component:requireAuthentication(CourseCate)}

目前存在的一些问题:

高阶函数中传入的最顶层的Component不能再使用connect

过多的高阶函数生命周期的逻辑难以维护、性能隐患

Actions中间件验证
export function checkAuth(nextUrl,nextFn) {
    return (dispatch,getState)=>{
        //检测用户登录情况
        if(!getState().common.isSignIn){
            //没有登录 记录当前path 
            //跳转到sign page 登录完成后 跳转回来
            dispatch(setNextUrl(nextUrl));
            pushUrl("/sign");//封装了 browserHistory.push(url)
        }else{
            //通过验证后 执行下一个Fn
            dispatch(nextFn);
        }
    }
}

你可以像这样用在你的Actions中

export function fetchFoo(url,conf) {

    return (dispatch,getState) => {
        if(shouldFetchFoo(getState())){
            dispatch(requestFetchFoo());
            return fetch(url,conf)
            .then(res=>res.json())
            .then(json=>{
                ...
            })
        }
    }
    
}
export function needFetchFoo(nextUrl,url,conf){
    retrun (dispatch)=>{
        dispatch(checkAuth(nextUrl,fetchFoo(url,conf)))
    }
}

目前存在的一些问题:

虽然可以避免过多的高阶函数函数导致页面性能下降,但是无法很好满足业务逻辑

验证如果未通过直接阻断当前操作

Component WillMount 验证

这基本上可以认为是Actions中间验证的一种变种

export function checkAuthWithoutNextFn(nextUrl) {
    return (dispatch,getState)=>{
        //check if user sign in
        if(!getState().common.isSignIn){
            //if not set the nexturl 
            //and push url to sign page
            dispatch(setNextUrl(nextUrl));
            pushUrl("/sign");
        }
    }
}

你可以像这样把他用在Component WillMount事件中

    componentWillMount(){
        const {dispatch} = this.props;
        dispatch(CommonActions.checkAuthWithoutNextFn("/coursecate"));
    }

目前存在的一些问题:

权限未得到验证时,不会阻断子控件渲染,触发子控件生命周期中的事件

举个例子:
比如父控件中componetWillDidMount中调用该方法判断用户登录状态
fatherComponet.js

    componentWillMount(){
        const {dispatch} = this.props;
        dispatch(CommonActions.checkAuthWithoutNextFn("/coursecate"));
    }

然而子控件componentWillMount中有一个fetch是需要权限验证(此时父控件中并没有阻断子控件渲染,在父控件正在验证权限的同时,子控件的fetch执行了。高阶函数可以阻断子控件渲染)的。
虽然渲染顺序是fatherComponet->childComponet
但是childComponet里的componentWillMount也是触发了(也就是说,在未验证登录情况下就触发了fetch),可能会造成一些不必要的请求
我目前的处理方式:在子控件ComponentWillMount的fetch中加入一个shouldFetch()进行请求前判断

总结

1.高阶函数适合用在:子控件需要确定权限后渲染
2.actions中间件适合:无状态页面中的登录状态判断
3.component验证,使用范围就比较狭窄了。

大家雨露均沾

以上是我个人目前的一些小见解,欢迎各位指正和补充哈。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86374.html

相关文章

  • react技术栈实践(从前到后撸一个电影搜集应用)

    摘要:其实,该复杂的东西在哪放都复杂,只不过现在更清晰一点使用不好的地方就是太繁琐了,定义各种各种组件。。。。。 之前做了个好电影搜集的小应用,前端采用react,后端采用express+mongodb,最近又将组件间的状态管理改成了redux,并加入了redux-saga来管理异步操作,记录一些总结 在线地址 手机模式 源码 主要功能 爬取豆瓣电影信息并录入MongoDB 电影列表展示...

    tigerZH 评论0 收藏0
  • 关于前端数据&逻辑思考

    摘要:这里引出了一个概念,就是数据流这个概念,在项目中我将所有数据的操作都成为数据的流动。 最近重构了一个项目,一个基于redux模型的react-native项目,目标是在混乱的代码中梳理出一个清晰的结构来,为了实现这个目标,首先需要对项目的结构做分层处理,将各个逻辑分离出来,这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步: 拆分组件 逻辑处理 抽象、...

    alin 评论0 收藏0
  • 对服务端渲染一次实践(带你掌握服务端渲染)

    摘要:之前做的一个应用,最近把首页改成了服务端渲染的形式,过程还是很周折的,踩到了不少坑,记录一些重点,希望有所帮助前端使用的技术栈升级到升级到服务项目地址喜欢的给个,感谢。。。。。。。 之前react做的一个应用,最近把首页改成了服务端渲染的形式,过程还是很周折的,踩到了不少坑,记录一些重点,希望有所帮助 前端使用的技术栈 react、react-dom 升级到 v16 react-ro...

    v1 评论0 收藏0
  • 一些基于React、Vue、Node.js、MongoDB技术栈实践项目

    摘要:利用中间件实现异步请求,实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化,项目文章在这里。后来一直没动,前些日子才把后续的完善。 欢迎访问我的个人网站:http://www.neroht.com/ 刚学vue和react时,利用业余时间写的关于这两个框架的训练,都相对简单,有的...

    tangr206 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<