umi dva 请求拦截跳转路由

Question

问题描述

我在Layout组件被加载的请求接口，根据请求的接口返回结果进行路由拦截，验证是否登录，如果接口返回错误码就返回登录页面，但现在的结果是：当我在浏览器里直接输入/dashboard 时,先进入了dashboard页面，然后才进行了路由跳转，为什么不直接进入login页面

相关代码

请求拦截：

request.interceptors.response.use(
  response => {
    let { status = 0, data = null } = response || {};
    if (status === 200) {
      if (data.status === 401) {
        router.push('/login');
      } else if (data.status !== 0) {
        message.error(data.msg);
        return Promise.reject(response.data);
      }
      return data.data;
    } else {
      return Promise.reject(response.data);
    }
  },
  error => {
    message.error(error);
    return Promise.reject(error);
  },
);

---

Layout组件

class BasicLayout extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'app/query' });
  }

  render() {
    const { props } = this.props;
    return (
      <div>
        <h1>Layout</h1>
        {props.children}
      </div>
    );
  }
}

---

import BaseLayout from './BaseLayout';
function BasicLayout(props) {
  if (props.location.pathname === '/login') {
    return props.children;
  }
  return <BaseLayout props={props} />;
}

求大佬指导。

Answer 1

你先缕清思路，判断是否登录的逻辑是在调用API后，根据服务端的信息判断是否登录，而这个接口是在componentDidMount上调用的，react 的componentDidMount意思是在组件过载后会触发这个钩子。

现在的执行顺序是：componentDidMount 页面挂载完毕，显示页面 -> 调用API -> 服务端发现你没有登录信息，返回401让你去登录 -> 去登录页面。

componentWillMount可以在页面挂载之前调用接口，但仍然会依赖服务端的响应时间，因此还是可能会有一闪而过的感觉。如果你想时间完全在前端拦截的话，需要在全局上记录用户状态，来判断用户信息再进行跳转。