鍍金池/ 問答/HTML/ react 的路由怎么權(quán)限判斷?

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

//////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頁面,但是也會(huì)執(zhí)行componentWillMount, componentDidMount 這兩個(gè)方法(有些邏輯是寫在componentDidMount, 請問能不能阻止執(zhí)行這兩個(gè)方法)

回答
編輯回答
情殺

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

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

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

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

2017年10月31日 19:19
編輯回答
心沉

一般登錄是后臺來做的，你登錄的時(shí)候會(huì)返回給你token，你請求接口的時(shí)候帶上token，從而來判斷你登錄了沒有，如果接口返回錯(cuò)誤，你就跳轉(zhuǎn)到登錄頁

2018年6月24日 11:03
編輯回答
瘋浪

不能阻止這兩個(gè)方法。如果要做權(quán)限控制，可以試一試高階組件。

2017年1月17日 17:35