Question

我想通过登录来保护我的反应应用程序。我的反应应用程序中有3个屏幕。但是每个屏幕的网址都不受保护。我可以直接输入任何页面的url，localhost将我带到相应的页面。我想要的是除非用户登录，每当他输入除主URL之外的任何URL（指向登录屏幕）时，他应该首先被重定向到登录屏幕。

我已经尝试过很少的东西。就像我有这样的路由器

function authorize(){
    console.log('inside')
    if(window.localStorage.token == undefined) {

        browserHistory.push('/')
    }
}
function getRoutes(store) {

    return (
        <Router history={browserHistory}>
            <Route path="/" component={LoginPage}/>
            <Route path='app' component={App}  onEnter={()=>{authorize()}}>
                <IndexRoute component={Home}/>
                <Route path='/video-screen' component={VideoScreen}>
                    <IndexRoute component={TagList}/>
                    <Route path='/add' component={AddTags}/>
                    <Route path='/TagList' component={TagList}/>
                    <Redirect from='*' to='/'/>
                </Route>
            </Route>
        </Router>
    )
}
export default getRoutes;

我正在登录屏幕上存储我的登录令牌。这是来自我的登录组件，我在其中对api进行ajax调用，在成功登录时返回一个标记。

$.ajax(settings).done((response) => {
            token = response.auth_token;
            window.localStorage.token_auth = token;  //store in localstorage
            this.context.router.push('/app')
        });

但是当我在没有登录的情况下访问我的localhost：3000 / app url之后这样做了，它将我带到页面并且不会将我重定向到登录页面。我做错了什么？

Answer 1

我在我的项目中使用此方法，基本上，如果用户已记录，则所有私有路径都包含在路径中，并带有组件控件。

我像你一样使用onEnter的方法，但随后组件将挂载你登录的任何内容。

data %>% data
   mutate(OurWebsite2 = ifelse(Our.Website == "Very Satisfied" | Our.Website == "Satisfied", 1, 0),
          Friendlinessofstaff2 = ifelse(Friendlinessofstaff == "Very Satisfied" | Friendlinessofstaff  == "Satisfied", 1, 0),
          FoodQuality2 = ifelse(FoodQuality== "Very Satisfied" | FoodQuality== "Satisfied", 1, 0) %>%
   group_by(Parameter1) %>%
   summarise(OurWebsiteSatisfaction = mean(OurWebsite2),
             FriendlinessofstaffSatisfaction = mean(Friendlinessofstaff2),
             FoodQualitySatisfaction = mean(FoodQuality2))

使反应路由器安全

1 个答案: