react 的路由怎么權(quán)限判斷?

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 組件中寫(xiě)了根據(jù)cookie中的userid,查詢(xún)是否已經(jīng)登錄,保存到redux中, 我想要在訪問(wèn) /private的時(shí)候判斷是否登錄,如果沒(méi)有登錄跳轉(zhuǎn)到登錄頁(yè)面

//////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() {...}
}

比如直接訪問(wèn) Private 組件(瀏覽器直接:localhost/private去訪問(wèn)),如果沒(méi)有登錄,在constructor階段就直接跳回到/login頁(yè)面,但是也會(huì)執(zhí)行componentWillMount, componentDidMount 這兩個(gè)方法(有些邏輯是寫(xiě)在componentDidMount, 請(qǐng)問(wèn)能不能阻止執(zhí)行這兩個(gè)方法)

回答

編輯回答

情殺

router 里有個(gè) render 屬性，不知道能不能解決你的問(wèn)題。

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

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

然后官網(wǎng)有個(gè)這樣的 demo

2017年10月31日 19:19

編輯回答