React+DvaJS 之 hook 路由权限控制
在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
不会这些技术，大数据开发薪资不会高？
大数据技术与运用的成熟，应用集中于互联网、金融、医疗、新能源、通信和房地产等行业。整理平均薪资情况和大数据学习大纲供查看
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 ...
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]我也不是经常逛，最近想刷刷存在感，发了点博客
联系我们
