react 的路由怎么权限判断?

Question

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <AuthRoute />
                <Switch>
                    <Route path="/(login)?" exact component={Login}></Route>
                    <Route path="/private" component={Private} />
                    <Route component={NoMatch} />
                </Switch>
            </div>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

AuthRoute 组件中写了根据cookie中的userid,查询是否已经登录,保存到redux中, 我想要在访问 /private的时候判断是否登录,如果没有登录跳转到登录页面

//////Private 组件//////
class Private extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        if (this.props.user.isLogin===false) {
            this.props.history.push('/login');
        }
        return;
    }

    componentWillMount() {
        console.log(2);
    }
    componentDidMount() {
        console.log(3);
    }
    componentWillUpdate(nextProps, nextState) {
        console.log(4);
    }
    render() {...}
}

比如直接访问 Private 组件(浏览器直接:localhost/private去访问),如果没有登录,在constructor阶段就直接跳回到/login页面,但是也会执行componentWillMount, componentDidMount 这两个方法(有些逻辑是写在componentDidMount, 请问能不能阻止执行这两个方法)

Answer 1

不能阻止这两个方法。如果要做权限控制，可以试一试高阶组件。

Answer 2

一般登录是后台来做的，你登录的时候会返回给你token，你请求接口的时候带上token，从而来判断你登录了没有，如果接口返回错误，你就跳转到登录页

Answer 3

router 里有个 render 属性，不知道能不能解决你的问题。

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

然后官网有个这样的 demo