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,
  },
});

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