原

React+DvaJS 之 hook 路由权限控制

2016年12月09日 19:32:29

阅读数：19425

在model的subscriptions中进行匹配，分发到effects中进行判断和跳转，更多资料参考这里

effects 有三个参数:

Effects

put

用于触发 action 。

yield put({ type: 'todos/add', payload: 'Learn Dva' });

call

用于调用异步逻辑，支持 promise 。

const result = yield call(fetch, '/todos');

select

用于从 state 里获取数据。

const todos = yield select(state => state.todos);

基于 action 进行页面跳转

import { routerRedux } from 'dva/router';

// Inside Effects

yield put(routerRedux.push('/logout'));

// Outside Effects

dispatch(routerRedux.push('/logout'));

// With query

routerRedux.push({

  pathname: '/logout',

  query: {

    page: 2,

  },

});

除 push(location) 外还有更多方法，详见这里

示例如下：

  state: {

    isLogin: false,

    loginfail:false,

  },

  subscriptions: {

    setup({ dispatch, history }) {

      history.listen(location => {

        if (location.pathname.includes('app')) {

          dispatch({

            type: 'loginhook',

          });

        }

      });

    },

  },

    effects: {

    * login({ payload },{call, put}) {

      const { data } = yield call(login, payload);

      if (data && data.success) {

        yield put({

                  type: 'checklogin',

                  payload:{

                    isLogin:true,

                  }

              });

        yield put(routerRedux.push('/app/users'));

      }else{

        yield put({

                    type: 'loginfail',

                    payload:{

                      loginfail:true,

                    }

                });

      }

    },

    * loginhook({ payload },{select,call, put}){

      const isLogin = yield select(({session}) => session.isLogin);

      console.log('logincheck',isLogin);

      if(isLogin === false){

        yield put((routerRedux.push('/login')));

      }

    },

  },

  reducers: {

    checklogin(state,action) {

      return {...state,isLogin:action.payload.isLogin };

    },

    loginfail(state,action) {

      return {...state, loginfail:action.payload.loginfail};

    },

  }

文章标签： react dvajs dva hook 权限控制

个人分类： react

▼查看关于本篇文章更多信息

上一篇4.Draftjs 学习笔记-Decorators

下一篇React+DvaJs 之 Context与Props

不会这些技术，大数据开发薪资不会高？

大数据技术与运用的成熟，应用集中于互联网、金融、医疗、新能源、通信和房地产等行业。整理平均薪资情况和大数据学习大纲供查看

想对作者说点什么？我来说一句

LeoDu20182018-05-03 15:23:31#2楼

您好楼主，我现在使用DVA遇到，判断是否登录未登录跳到登录页面的问题，可以把你上面的登录判断的代码分享给我一下吗？

yongf20142018-03-18 23:09:05#1楼

感谢博主~终于找到了。

dva路由监听

344

在dva中我们可以在Modal中实现事件监听，通过在modal中添加一个 subscriptions,并且在里面创建一个setup函数{ namespace: 'infoArea', ...

React-Router传参取值页面跳转

2万

项目结构 image.png -RouterMap页面，所有的页面都必须注册路由 import React from 'react' import { Router...

Redux-Router - CSDN博客

7-25

import { browserHistory } from 'react-router'; browserHistory.push('/some...react-router-redux 将react-router 和 redux 集成到一起,用redux的方式去操作...

dva路由跳转找不到组件 - CSDN博客

5-21

然后经过一番折腾最后用了一个叫做routerRedux的工具,这个是dva基于redux封装好了...(routerRedux.push({ pathname: `/adminCompanyAccount/detail/${record.id}`,...

初探 React Router 4.0

5.8万

React Router 4.0 （以下简称 RR4）已经正式发布，它遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆提供了导航功能的组件（还有若干对象和方法），具有声明式（引入即用...

怎么让route拥有redux的方法 - CSDN博客

7-31

需求如何利用route的onEnter钩子来出发redux的dispatch方法 I just wrapped my routes in a function that returns them. This allows you to pass the redux ...

React Router的一个完整示例 - CSDN博客

7-24

react-router-redux 简单例子 u013224660 12-28 2070 reducer与按需加载组件...vue-router 2.0 常用基础知识点之router.push() 阅读量:84596 使用Vue-Router...

react登录跳转2种方式

452

第一种方式，在页面中跳转：切记引入 import { routerRedux } from 'dva/router';// 登录 handleSubmit = (err, values) =&...

antd mobile（六）react-router 左进右出切换界面

1442

第五节我们配置了页面路由切换，但发现个问题，所有界面都是向左切换的，感觉还是不对啊，仔细分析下原生app，会发现应该是进入是左切换，返回时应该是右切换出。第一步：修改路由动画配置信息：修改前的代...

React Router中pushState的使用方法 - CSDN博客

6-5

this.props.history.pushState({passParam: true}, "/targetURL"); ...redux router 组件如何... fay462298322:跟redux毫无关系 angular2.0如何使用管...

学习react,redux,router,antd的一些感悟(见解) - CSDN博客

7-26

文章标签: 开发工具调试react redux antd 个人分类: 编程日记 react 前端开发...antd导航菜单用的是官网的Layout示例:点击打开链接和react-router-dom结合,实现点击...

Redux-Router

1006

1. 基本用法React Router 安装命令如下$ npm install -S react-router 使用时，路由器Router就是React的一个组件。import { Router ...

看看!让女人床上尖叫求饶好方法！快云 · 顶新

react项目开发-路由优化(前三篇续) - CSDN博客

8-6

目前的项目架构,大家都能看到,有路由跳转的地方都是写死的url,如<Link to={'/aaa'}>,push({pathname:'/login'}),这种方式呢,没有问题,...

深入redux技术栈 - CSDN博客

6-7

简单的说, react-router-redux 让我们可以把路由也当作状态的一部分,并且可以使用redux的方式改变路由:直接调用dispatch: this.props.push(“/detail/”);...

DVA知识集合

9944

react与dva 原文地址：https://github.com/dvajs/dva-knowledgemap 1.变量声明const DELAY = 1000let count = 0 cou...

react前端框架dva(三)

2925

API输出文件dva默认输出文件。dva/router默认输出 react-router 接口， react-router-redux 的接口通过属性 routerRedux 输出。比如：import...

react-router-redux 5.0 helloworld - CSDN博客

6-18

{ConnectedRouter, routerReducer, routerMiddleware, push} from 'react-router-redux' import createSagaMiddleware, {takeEvery} from 'redux-saga' import...

dva源码解析（一）

3932

写在前面dva是蚂蚁金服推出的一个单页应用框架，对redux，react-router，redux-saga进行了上层封装，没有引入新的概念，但是极大的程度上提升了开发效率；下面内容为本人理解，如有错...

深入redux技术栈

342

http://www.tuicool.com/articles/Afaeiue这一篇是接上一篇“react进阶漫谈”的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同...

react-router-redux 5.0 helloworld

1833

最新版本 react-router-redux 5.0 路由DEMO使用了 redux-react,react-saga,react-router,react-router-redux 实现了路...

React Router的一个完整示例

642

本博文提供一个单网页结构网页（SPA）使用React Router路由控制跳转的完整例子。http://blog.csdn.net/future_todo/article/details/530366...

React Router中pushState的使用方法

1883

带参数页面跳转 [javascript] view plain copy this.props.history.pushState({pass...

学习react,redux,router,antd的一些感悟(见解)

6347

学习react的一些感悟ps:本文列出的教程都是中文版如果你英语不错建议看英文原版教程!!学习react有段时间了总结了一下经验学习前你必须先掌握的知识开发环境建议linux或者mac osx...

react-navigation及dva使用(三)

3061

关于react-navigation，由于是社区维护的路由库，所以更新和问题会比较多，版本更新也比较快，我用的2个版本比较多，一个是beta7版本，现在master是beta11(截止到7月4日为止)...

ReactJS & dva 项目常见报错问题与解决方法（react-router 4）

2700

1. 项目中用 dva-cli 生成路由：命令行：$ dva g route users 报错信息： AssertionError [ERR_ASSERTION]: ...

react dva 碎片02

818

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。( Inspired by elm ...

基于React，dva脚手架的知乎日报

1.3万

MyZhihuApp1,初始化npm install dva npm install dva-cli -g mkdir MyZhiHuAppDva dva -init npm start浏览器打开lo...

如何用 Vue 实现前端权限控制（路由权限 + 视图权限 + 请求权限）

460

随着前后端分离架构的流行，权限控制这个曾经陌生的话题开始进入很多前端同学的视野，作为一名前端，可能部分同学会认为权限是后端的事，其实这个想法是片面的，后端是权限控制的最后一扇门，而在这之前，做好前端权...

CodeIgniter通过hook的方式实现简单的权限控制

864

根据自己的实际情况，需要两个文件，一个是权限控制类，Acl，另外一个是权限配置的文件acl.php放在了config这个目录下。 Acl这个类放在了application/hook/acl.ph...

个人资料

浪漫不属意

关注

原创: 30

粉丝: 12

喜欢: 9

评论: 10

等级：

访问：: 5万+

积分：: 707

排名：: 7万+

勋章：

个人分类

展开

归档

展开

联系我们

请扫描二维码联系客服

400-660-0108

3
写评论
目录
收藏
微信
微博
QQ

关闭