routerRedux.push 有时不会执行路由跳转

taut 发布于 2017-08-11 dva 最后更新 2018-07-30 21:06 7 浏览

router

{
    path: '/',
    component: App,
    onEnter: (nextState, replace) => {
        app._store.dispatch({ type: 'app/authorize' });
    }
}

effects

{
* authorize({}, { call, put, select }) {
const user = yield select(state => state.app.user);
if (!user) {
const { data } = yield call(appService.check);
if (!data.error) {
yield put({
type: 'setUser',
user: data
});
} else {
yield put({
type: 'redirectToLogin'
});
}
}
}

* redirectToLogin({ unauthorized }, { select, put, call }) {
    if (unauthorized) {
        yield put({
            type: 'setUser',
            user: false
        });
    }
    if (loginUrl.startsWith('http')) {
        window.location.href = loginUrl;
    } else {
        const { pathname, hash, search } = window.location;
        yield put(routerRedux.push({
            pathname: loginUrl,
            query: {
                returnUrl: encodeURI(pathname + hash + search)
            }
        }));
    }
}

}

首次加载 http://localhost:8080/

跳转到 http://localhost:8080/#/login

然后改动URL为 http://localhost:8080/#/dashboard

这个 dashboard 是 App 路由的子路由

这样有时就不会跳转到 login 页面

原本验证是写在订阅里监听 pathname 的,也有同样的问题

history.listen(location => {
    // auth
});

如果直接在 onEnter 这里跳转就正常

onEnter: (nextState, replace) => {
    replace({
        pathname: '/login'
    });
}

redux dev tool 导出的记录

{
    "payload": "[{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/\",\"search\":\"\",\"hash\":\"\",\"state\":null,\"action\":\"POP\",\"key\":\"xq8nj0\",\"query\":{},\"$searchBase\":{\"search\":\"\",\"searchBase\":\"\"}}},{\"type\":\"app/authorize\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"app/redirectToLogin\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/login\",\"search\":\"?returnUrl=%2F%23%2F%3F_k%3Dxq8nj0\",\"hash\":\"\",\"state\":null,\"action\":\"PUSH\",\"key\":\"230rlf\",\"query\":{\"returnUrl\":\"/#/?_k=xq8nj0\"},\"$searchBase\":{\"search\":\"?returnUrl=%2F%23%2F%3F_k%3Dxq8nj0\",\"searchBase\":\"\"}}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}},{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/\",\"search\":\"\",\"hash\":\"\",\"state\":null,\"action\":\"POP\",\"key\":\"0jgpex\",\"query\":{},\"$searchBase\":{\"search\":\"\",\"searchBase\":\"\"}}},{\"type\":\"app/authorize\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"app/redirectToLogin\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/login\",\"search\":\"?returnUrl=%2F%23%2F%3F_k%3D0jgpex\",\"hash\":\"\",\"state\":null,\"action\":\"PUSH\",\"key\":\"6ozw5w\",\"query\":{\"returnUrl\":\"/#/?_k=0jgpex\"},\"$searchBase\":{\"search\":\"?returnUrl=%2F%23%2F%3F_k%3D0jgpex\",\"searchBase\":\"\"}}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}},{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/\",\"search\":\"\",\"hash\":\"\",\"state\":null,\"action\":\"POP\",\"key\":\"gtwaxu\",\"query\":{},\"$searchBase\":{\"search\":\"\",\"searchBase\":\"\"}}},{\"type\":\"app/authorize\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"app/redirectToLogin\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/login\",\"search\":\"?returnUrl=%2F%23%2F%3F_k%3Dgtwaxu\",\"hash\":\"\",\"state\":null,\"action\":\"PUSH\",\"key\":\"zzcqho\",\"query\":{\"returnUrl\":\"/#/?_k=gtwaxu\"},\"$searchBase\":{\"search\":\"?returnUrl=%2F%23%2F%3F_k%3Dgtwaxu\",\"searchBase\":\"\"}}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}},{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/content/add\",\"search\":\"\",\"hash\":\"\",\"state\":null,\"action\":\"POP\",\"key\":\"mg5dd0\",\"query\":{},\"$searchBase\":{\"search\":\"\",\"searchBase\":\"\"}}},{\"type\":\"app/authorize\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"app/redirectToLogin\"},{\"type\":\"@@DVA_LOADING/SHOW\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/authorize\"}},{\"type\":\"@@router/LOCATION_CHANGE\",\"payload\":{\"pathname\":\"/login\",\"search\":\"?returnUrl=%2F%23%2Fcontent%2Fadd%3F_k%3Dmg5dd0\",\"hash\":\"\",\"state\":null,\"action\":\"PUSH\",\"key\":\"6yf5rt\",\"query\":{\"returnUrl\":\"/#/content/add?_k=mg5dd0\"},\"$searchBase\":{\"search\":\"?returnUrl=%2F%23%2Fcontent%2Fadd%3F_k%3Dmg5dd0\",\"searchBase\":\"\"}}},{\"type\":\"@@DVA_LOADING/HIDE\",\"payload\":{\"namespace\":\"app\",\"actionType\":\"app/redirectToLogin\"}}]",
    "preloadedState": "{}"
}
已邀请:

jiusto

赞同来自:

写个 demo 传到 github 上?

rquis

赞同来自:

这个问题怎么解决的,我这边也遇到这个问题!

ererum

赞同来自:

修改原来的login模拟接口,想在成功登录之后,跳到对应的路由, yield put(routerRedux.push(from) 出现问题,
effects: {
* login ({
payload,
}, { put, call, select }) {
const data = yield call(login, payload)
const { locationQuery } = yield select(_ => _.app)
if (data.success) {
const { from } = locationQuery
yield put({ type: 'app/query' })
if (from && from !== '/login') {
yield put(routerRedux.push(from))
} else {
yield put(routerRedux.push('/dashboard'))
}
} else {
throw data
}
},
},
报错信息:
Cannot read property 'match' of undefined
Cannot read property 'protocol' of undefined