在onEnter路由上使用auth函数和使用高阶函数，这两种方法真的安全吗？

Question

因此，经过身份验证检查的受保护路由看起来如下所示（假设我们只按需发送路由）：

import { push } from 'react-router-redux'

    function requireAuth(store) {
        const check = localStorage.jwt
        check ? store.dispatch(push('/dashboard')) : store.dispatch(push('/'))
    }

    export default (store) => ({
      path: 'dashboard',
      onEnter: requireAuth(store),
      getComponent (nextState, cb) {
        require.ensure([], (require) => {
          const Dashboard = require('./containers/DashboardContainer').default
          cb(null, Dashboard)
        }, 'dashboard')
      }
    }) 

为了完成我们的索引路由文件：

    import Login from './login'
    import Dashboard from './Dashboard'
    import Logout from './Logout'

    export const createRoutes = (store) => ({
      path: '/',
      indexRoute: Login,
      childRoutes: [
        Dashboard(store), //Our protected route
        Logout(store)
      ]
    })

    export default createRoutes

在中间放置一个旁观者攻击和继承问题的javascript加密方法的性质，如这里所讨论的：身份验证和会话管理的SPA最佳实践（SPA best practices for authentication and session management

关于每种方法，我还遗漏了哪些其他注意事项？

Answer 1

在我看来，您不应该将JWT令牌存储在localStorage中，而应该将其作为带有httpOnly和安全标志为true的cookie保存。这样客户端脚本就无法获取JWT令牌。此外，中间人攻击也是不可能的，因为您只能在https上发送cookie。

您可以有一个apiendpoint来检查客户机是否有JWT以及它是否有效。以便您可以在需要的任何地方对onEnter函数进行重定向。

编辑

不是真的，如果你有一个无效的令牌，你重定向你的用户到页面，如果这个页面做一些从服务器提取，你会得到401错误，你将不得不检查401错误，以便你可以重定向用户登录。这看起来并不有效也不清楚。

将上面的示例与使用高阶函数包装受保护的组件相比较，这样我们就可以在生命周期方法WillMount和WillRecieveProps中预形成身份验证检查，如您在这里所见。

除了httpOnly标志true Cookie外，所有这些都被公开给客户端。