React+DvaJS 之 hook 路由权限控制

来源:互联网 发布:冒险岛市场实时数据 编辑:程序博客网 时间:2024/05/16 08:21

在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 Effectsyield put(routerRedux.push('/logout'));// Outside Effectsdispatch(routerRedux.push('/logout'));// With queryrouterRedux.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};    },  }
0 0
原创粉丝点击