React+DvaJS 之 hook 路由权限控制
在model的subscriptions中进行匹配，分发到effects中进行判断和跳转，更多资料参考这里javascript
effects 有三个参数:php
Effects
puthtml
用于触发 action 。前端
yield put({ type: 'todos/add', payload: 'Learn Dva' });vue
calljava
用于调用异步逻辑，支持 promise 。node
const result = yield call(fetch, '/todos');python
selectreact
用于从 state 里获取数据。linux
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
不会这些技术，大数据开发薪资不会高？
大数据技术与运用的成熟，应用集中于互联网、金融、医疗、新能源、通讯和房地产等行业。整理平均薪资状况和大数据学习大纲供查看
-
LeoDu2018 2018-05-03 15:23:31#2楼您好楼主，我如今使用DVA遇到，判断是否登陆未登陆跳到登陆页面的问题，能够把你上面的登陆判断的代码分享给我一下吗？
-
yongf2014 2018-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 ...
react项目开发-路由优化(前三篇续) - CSDN博客
8-6
目前的项目架构,你们都能看到,有路由跳转的地方都是写死的url,如<Link to={'/aaa'}>,push({pathname:'/login'}),这种方式呢,没有问题,...
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...
热门文章
- React+DvaJS 之 hook 路由权限控制
阅读量：19393
- 1.Draftjs 学习笔记
阅读量：4343
- 5.Draftjs 学习笔记-自定义控件（多媒体）
阅读量：3224
- phpqrcode 生成图片显示问题
阅读量：2831
- 3.Draftjs 学习笔记-Entities
阅读量：2538
最新评论
- React+DvaJS 之 hoo...
LeoDu2018：您好楼主，我如今使用DVA遇到，判断是否登陆未登陆跳到登陆页面的问题，能够把你上面的登陆判断的代码...
- React+DvaJS 之 hoo...
yongf2014：感谢博主~终于找到了。
- 宝宝，我要秀恩爱
u013046627：会玩
- 宝宝，我要秀恩爱
zwqZWQ2012：666
- zend guard loader...
ohmyauthentic：[reply]a1006570862[/reply]我也不是常常逛，最近想刷刷存在感，发了点博客
联系咱们