React-Router如何进行页面权限管理的方法

 更新时间:2017年12月06日 08:34:22   作者:seajean  
本篇文章主要介绍了React-Router如何进行页面权限管理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

在一个复杂的SAP应用中,我们可能需要根据用户的角色控制用户进行页面的权限,甚至在用户进入系统之前就进行权限的控制。本文就此一权限控制进行讨论。本文假设读者了解React和React-Router的相关使用。

从传统的Router开始

一个传统的路由大概长下边这个样式,这是没有添加任何权限限制的。

export default (store) => {
 const history = syncHistoryWithStore(hashHistory, store);
 return (
  <Router history={history}>
   <Route path="/" component={AppRoot} >
    <IndexRoute component={IndexPage} />
    <Route path="photo" component={PhotoPage} />
    <Route path="info" component={InfoPage} />
   </Route>
   {/* <Redirect path="*" to="/error" /> */}
  </Router>
 )
}

这里一共有3个页面 IndexPage, PhotoPage,InfoPage。

添加第一个权限

假设我们需要在用户进入PhotoPage之前需要验证用户是否有权限,根据store的的一个状态去判断。

先添加如下一个函数

const authRequired = (nextState, replace) => {
  // Now you can access the store object here.
  const state = store.getState();  
  if (state.admin != 1) {
   replace('/');
  }
 };

函数里我们判断了state的admin是否等于1,否则跳转到首页。

然后在Route添加 onEnter={authRequired} 属性

<Route path="photo" component={PhotoPage} onEnter={authRequired} />

通过以上,就完成了第一个权限的添加

进入系统之前就进行权限控制

如果需要在进入系统之前就进行权限控制,那么就需要改变一下策略。

比如上边的例子,加入state的admin并未加载,那么就需要在上一层的route进行数据加载

首先添加一个加载数据的函数

function loadData(nextState, replace, callback) {
  let unsubscribe;
  function onStateChanged() {
   const state = store.getState();
   if (state.admin) {
    unsubscribe();
    callback();
   }
  }
  unsubscribe = store.subscribe(onStateChanged);
  store.dispatch(actions.queryAdmin());
 }

接着再修改一下Router

<Router history={history}>
   <Route path="/" component={AppRoot} onEnter={loadData}>
    <IndexRoute component={IndexPage} />
    <Route path="photo" component={PhotoPage} onEnter={authRequired} />
    <Route path="info" component={InfoPage} />
   </Route>  
  </Router>

这样在进入下边之前,就会先进行数据加载。

通过以上简单几步,一个完整的权限控制链就完成了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解React Angular Vue三大前端技术

    详解React Angular Vue三大前端技术

    当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究,目的是为了解开这些前端技术的面纱,看看各自的庐山真面目。
    2021-05-05
  • React Native项目中使用Lottie动画的方法

    React Native项目中使用Lottie动画的方法

    这篇文章主要介绍了React Native 实现Lottie动画的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • react嵌套路由实现TabBar的实现

    react嵌套路由实现TabBar的实现

    本文主要介绍了react嵌套路由实现TabBar的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 浏览器中视频播放器实现的基本思路与代码

    浏览器中视频播放器实现的基本思路与代码

    这篇文章主要给大家介绍了关于浏览器中视频播放器实现的基本思路与代码,并且详细总结了浏览器中的音视频知识,对大家的理解和学习非常有帮助,需要的朋友可以参考下
    2021-08-08
  • 详解react中useCallback内部是如何实现的

    详解react中useCallback内部是如何实现的

    前几天有人在问在useCallback函数如果第二个参数为空数组, 为什么拿不到最新的state值,那么这一章就来分析一下useCallback内部是如何实现的,感兴趣的小伙伴跟着小编一起来学习吧
    2023-07-07
  • 说说react中引入css的方式有哪些并区别在哪

    说说react中引入css的方式有哪些并区别在哪

    本文主要介绍了说说react中引入css的方式有哪些并区别在哪,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • React创建组件的的方式汇总

    React创建组件的的方式汇总

    React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React组件的两种创建方式,一种是使用函数创建组件另一种是使用类创建组件,需要的朋友可以参考下
    2021-11-11
  • React Fiber源码深入分析

    React Fiber源码深入分析

    Fiber 可以理解为一个执行单元,每次执行完一个执行单元,React Fiber就会检查还剩多少时间,如果没有时间则将控制权让出去,然后由浏览器执行渲染操作,这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
    2022-11-11
  • react 生命周期实例分析

    react 生命周期实例分析

    这篇文章主要介绍了react 生命周期,结合实例形式分析了react 生命周期基本原理、操作步骤与注意事项,需要的朋友可以参考下
    2020-05-05
  • React forwardRef的使用方法及注意点

    React forwardRef的使用方法及注意点

    React.forwardRef的API中ref必须指向dom元素而不是React组件,通过一段示例代码给大家介绍了React forwardRef使用方法及注意点还有一些特殊情况分析,感兴趣的朋友跟随小编一起看看吧
    2021-06-06

最新评论