让我们以一个jwt令牌在登录时保存到本地存储的系统为例，现在我们检查令牌是否存在，以允许用户访问受保护的路由。
我们正在使用react-router-redux，并将所有内容与webpack捆绑在一起，我们的代码位于client/src文件夹中，而不是服务器文件夹。
所以带认证检查的受保护路由看起来像下面这样(假设我们只在需要时发送路由):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最佳实践
我想把重点放在上面演示的一个函数的方法上，该函数放置在onEnter上以允许访问:
如果我正确理解了上面的例子是捆绑并发送给客户端的，现在我可能错了，路由定义实际上并没有在捆绑包中发送。所以我想问题是:默认情况下，用户是否可以访问或看到我们上面的路由定义?如果可以，我们如何阻止它?
关于示例中的授权检查，我已经看到它被使用，并且在本地存储中不存在令牌时只是重定向，这真的足够预防吗?
将上面的示例与使用高阶函数来包装受保护的组件进行比较，这样我们就可以在生命周期方法WillMount和WillRecieveProps中执行验证检查，如您在这里所见。
我认为这两种方法都会因为暴露给客户而受到影响。我说的对吗?
关于每种方法，我还遗漏了哪些其他注意事项?
在我看来，您不应该将JWT令牌存储在localStorage中，相反，您应该将其保存为httpOnly和secure标志为true的cookie。这样您的客户端脚本就无法获得JWT令牌。另外，中间人攻击是不可能的，因为你只在https上发送你的cookie。
你可以有一个api端点来检查客户端是否有JWT以及它是否有效。这样你就可以在需要的任何地方对onEnter函数进行重定向。
编辑如果我理解正确的话，上面的例子被捆绑并发送到现在我可能是错的，路由定义实际上不是在包裹中发送。所以我想问题是:用户是否有默认情况下，访问或可以看到我们上面的路由定义——如果是的话，如何查看我们能预防吗?
是的，你的整个应用程序和你所有的客户端代码一起被发送到客户端，所以任何人都可以看到你写的东西，如果他们想要的话。
同样适用于示例中的认证检查，我已经看到使用过如果本地存储中不存在令牌，则简单地进行重定向，这真的足够预防吗?
不是真的，如果你有一个无效的令牌，你重定向你的用户到页面，如果这个页面从服务器做一些抓取，你会得到401错误，你必须检查401错误，这样你就可以重定向用户登录。这看起来既不高效也不清晰。
将上面的示例与使用高阶函数包装我们的受保护的组件，这样我们就可以在生活中执行验证循环方法WillMount和WillRecieveProps，你可以在这里看到例子。
所有这些都暴露给客户端除了httpOnly标志true cookie。
希望能有所帮助。