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]我也不是常常逛，最近想刷刷存在感，發了點博客
聯繫咱們