原

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,

  },

});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

除 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};

    },

  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ohmyauthentic/article/details/53543441
个人分类： react
▼查看关于本篇文章更多信息

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

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

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

  • 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...

初探 React Router 4.0

5.8万

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

react登录跳转2种方式

452

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

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

1442

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

Redux-Router

1006

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

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

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...

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万+
勋章：

最新评论

 

React+DvaJS 之 hook 路由权限控制的更多相关文章

  1. react的路由权限控制

    在使用路由的时候,有的时候我们的界面只能够在登录之后才可以看的到,这个时候就需要使用路由权限控制了 找了资料发现一个就是我使用的方法,一个是高阶组件. 原谅菜鸟看不太懂不会使用高阶组件………… 首先在 ...

  2. asp.net后台管理系统-登陆模块-路由权限控制_1

    using System.Web.Routing; //重写System.Web.Routing中Initialize方法 protected override void Initialize(Req ...

  3. angular基于ui-router实现系统权限控制

    前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? ...

  4. Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制

    思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...

  5. Laravel 5 中间件、路由群组、子域名路由、 权限控制的基本使用方法

    创建控制器: php artisan make:controller Admin/IndexController 创建Middleware: php artisan make:middleware T ...

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

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

  7. Vue页面权限控制和动态添加路由

    原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...

  8. AntDesignPro的权限控制和动态路由

    最近看了AntDesignPro关于权限控制的官方文档以及自己框架里权限控制的实现,总结一下. 先贴一下官网上关于权限控制的图有利于理解 步骤如下: 判断是否有 AccessToken 如果没有则跳转 ...

  9. Vue | 自定义指令和动态路由实现权限控制

    功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...

随机推荐

  1. robotframework_如何用Chrome模拟手机打开H5页面

    由于公司目前的产品大部分都是APP端的H5页面,APP原生页面很少,测试H5页面如果去搭建appium或者macaca这类自动化平台太费时,太重而不能快速落地:与自动化的目标:提高测试效率相悖.但如果 ...

  2. python核心编程中网络爬虫的例子

    #!/usr/bin/env python import cStringIO # import formatter # from htmllib import HTMLParser # We use ...

  3. postgres linux下的安装和配置

    1.安装 使用如下命令,会自动安装最新版,这里为9.5 sudo apt-get install postgresql 安装完成后,默认会: (1)创建名为"postgres"的L ...

  4. mysql时间日期函数

    now(), current_timestamp(); -- 当前日期时间 current_date(); -- 当前日期 current_time(); -- 当前时间 date('yyyy-mm- ...

  5. Notepad++ 插件之 TextFX (安装及作用)

    <安装:打开 notepad++  插件 -> Plugin Manager -> Show Plugin Manager -> available ->选中 TextF ...

  6. ubuntu16.04

    原来安装的14.04快捷键冲突,又改不过来,还有就是每次从新启动,桌面就恢复原来的状态了.然后突然有一天桌面没了,我一气之下,从新安装.装好16.04还是没有桌面,我也是醉了,还好解决了.应该是我的集 ...

  7. Python学习之路——文件操作

    文件操作分三步:打开文件,读写文件,关闭文件.读取操作时没有给read函数加括号,会出现下面这样的车祸 >>> data = open('/home/supersun/Documen ...

  8. 阻止vue事件冒泡的方法

  9. 使用actionerror做失败登录验证

    一. 登录页面中放置如下代码: <h4>员工登录</h4> <div style="color:red"> <s:actionerror/ ...

  10. js替换字符串中的空格，换行符\r\n或\n替换成<br>

    为了让回车换行符正确显示,需要将 \n 或 \r\n 替换成 <br>.同样地,将空格替换存  .这里我们通过正则表达式来替换. 一.替换所有的空格.回车换行符 //原始字符串 var s ...