Javascript 添加授权以响应路由器

我在react应用程序中定义了路由器。我的申请表有3页。用户成功登录后，将转到下一个屏幕。Flow工作正常。但有一个问题。当我在应用程序中直接输入其他页面的url时，无论用户是否登录，它都会加载该页面。我想在这上面加一张支票。如果用户未登录，则必须将其重定向到登录页面

这是我的路线

<Route path="/" component={LoginPage}/>
        <Route path='app' component={App}>
            <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>

更新

 function authorize(){
            if(window.localStorage.token == null){
                browserHistory.push('/')
            }
        }
    function getRoutes(store) {


        return (
            <Router>
                <Route path="/" component={LoginPage}/>
                <Route path='app' component={App} onEnter={this.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;

函数授权（）{
if（window.localStorage.token==null）{
browserHistory.push（“/”）
}
}
功能getRoutes（存储）{
返回(
)
}
导出默认路径；

---

告诉我一个错误，说Uncaught ReferenceError:未定义授权

路由具有一个可用于此目的的OneNoter功能。假设您有一个函数在包含React路由器的组件中对其进行授权。您可以这样做（这里有一些伪代码）：

authorize（）{
如果（用户未经授权）browserHistory.push（登录页面）
}

---

这样，即使他们直接在浏览器的URL栏中输入URL，仍然会调用OneNet功能，如果他们没有登录，它会将他们重定向到登录页面。

路由具有OneNet功能，您可以使用它。假设您有一个函数在包含React路由器的组件中对其进行授权。您可以这样做（这里有一些伪代码）：

authorize（）{
如果（用户未经授权）browserHistory.push（登录页面）
}

---

这样，即使他们直接在浏览器的URL栏中输入URL，onEnter函数仍然会被调用，如果他们没有登录，它会将他们重定向到登录页面。

问题是你在

应用程序
组件中声明了你的
授权
方法，您需要在定义所有
路由的文件中声明它，如下所示：

function authorize(){
    console.log('hello');
} 

<Router>
    <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>

函数授权（）{
log（'hello'）；
} 
问题如果您在
应用程序
组件中声明了您的
授权
方法，您需要在定义所有
路由
的文件中声明它，如下所示：

function authorize(){
    console.log('hello');
} 

<Router>
    <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>

函数授权（）{
log（'hello'）；
} 
我使用高阶组件来检查此示例

RequireAuth

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'



export default function (ComposedCmponent) {
class RequireAuth extends Component {
componentWillMount () {
   //we need to check if user is authenticated before the component will mount 
  //here i check if the user is authenticated i'm using JWT authentification for this exemple, usually i use local storage to save the token and we can check the validation of the token 
  //If the user is not authenticated we redirect to /login 
  let validtoken = window.localStorage.getItem('id_token')
  if (!this.props.isAuthenticated || !validtoken) {
    this.context.router.push('/login')
  }
}

componentWillUpdate (nexProps) {
  // we need to the same as we did in componentWillMount
  // in case component will update the use not authenticated 
  //If the user is not authenticated we redirect to /login 
  if (this.props.isAuthenticated !== nexProps.isAuthenticated) {
    if (!nexProps.isAuthenticated) {
      this.context.router.push('/login')
    }
  }
}

render () {
  //now the user is authenticated we render the component passed by     HOC component 
  return (
    <ComposedCmponent {...this.props} />
  )
}
}

我使用高阶组件来检查这个例子

RequireAuth

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'



export default function (ComposedCmponent) {
class RequireAuth extends Component {
componentWillMount () {
   //we need to check if user is authenticated before the component will mount 
  //here i check if the user is authenticated i'm using JWT authentification for this exemple, usually i use local storage to save the token and we can check the validation of the token 
  //If the user is not authenticated we redirect to /login 
  let validtoken = window.localStorage.getItem('id_token')
  if (!this.props.isAuthenticated || !validtoken) {
    this.context.router.push('/login')
  }
}

componentWillUpdate (nexProps) {
  // we need to the same as we did in componentWillMount
  // in case component will update the use not authenticated 
  //If the user is not authenticated we redirect to /login 
  if (this.props.isAuthenticated !== nexProps.isAuthenticated) {
    if (!nexProps.isAuthenticated) {
      this.context.router.push('/login')
    }
  }
}

render () {
  //now the user is authenticated we render the component passed by     HOC component 
  return (
    <ComposedCmponent {...this.props} />
  )
}
}

我通常只是把它作为一个函数保存在所有路由器内容呈现的组件中。我应该如何检查用户是否登录？您可以在状态中存储一个布尔值，跟踪用户是否登录。您可以将其保存在浏览器存储中，以便在刷新时（如站点记得您已登录时）它仍然存在。如果您使用的是plain React，那么您必须将此“授权”布尔值作为属性跨许多元素并向下传递到路由，这可能会很烦人。这是何时使用状态管理工具（如redux或jumpsuit）的一个很好的示例。使这样的东西更容易我正在使用react redux来保存状态。因此，当我调用登录api时，它会返回一个令牌。现在我将令牌存储到我的减速机中。我的疑问是，每次我刷新页面，比如说我进入登录url，该状态都将重置为空。对吗？即使我在新选项卡中打开应用程序，reducer是否也会保存状态？谢谢，我会研究它。我通常只是将它作为一个函数保存在呈现所有路由器内容的组件中。我应该如何检查用户是否登录？您可以在状态中存储一个布尔值，以跟踪他们是否登录。您可以将其保存在浏览器存储中，以便在刷新时（如站点记得您已登录时）它仍然存在。如果您使用的是plain React，那么您必须将此“授权”布尔值作为属性跨许多元素并向下传递到路由，这可能会很烦人。这是何时使用状态管理工具（如redux或jumpsuit）的一个很好的示例。使这样的东西更容易我正在使用react redux来保存状态。因此，当我调用登录api时，它会返回一个令牌。现在我将令牌存储到我的减速机中。我的疑问是，每次我刷新页面，比如说我进入登录url，该状态都将重置为空。对吗？即使我在新选项卡中打开应用程序，reducer也会保存状态吗（比如）？谢谢，我会查看iTunesGuughtReferenceError:Authorization未定义'它应该是{this.authorize}您的授权功能需要与所有路由器的东西位于同一个组件中。根据您的应用程序中的代码，它看起来不像是post@Jayce444是的。检查最新更新。仍然有错误。好的，我知道了。现在可以工作了。Uncaught ReferenceError:authorize未定义'它应该是{this.authorize}您的authorize函数需要与所有路由器组件位于同一个组件中。根据您的应用程序中的代码，它看起来不像是post@Jayce444是的。检查最新更新。仍然有错误。好的，我知道了。现在可以工作了。很抱歉，我无法理解此代码段中的任何内容。你能给我详细解释一下吗？请你参照一下我的部件名称好吗。我弄糊涂了。还有，这个组件放在哪里？会是一个很有帮助的人。谢谢。很抱歉，我无法理解此代码片段中的任何内容。你能给我详细解释一下吗？你能参考我的部件名称吗
 <Route path='/' component={App}>
  <Route path='/dashboard' component={requireAuth(Dashboard)} /> 
</Route>