背景
最近一直在做react和vue方面的研究，发现这两种解决方案所解决的问题基本是相似的：
- 组件化：将页面分成很多组件进行编写，这样可复用性好，而且逻辑清晰，肯定是趋势
- 路由管理：react有react-router，vue有vue-router，基本都是解决前端路由的问题，当然react拥有后台渲染的能力，所以可以前后端共享一套路由，这个比较爽，vue2即将也要推出服务器渲染了，值得期待
- 数据管理：这块基本就是redux和vuex，这两个基本一致
但是我在做页面的时候还有一个问题怎么也绕不过去：权限管理怎么处理？
简单点说就是在用户登录和未登录时，展示的页面是不同的，有些页面可以访问，有些不能，需要做页面间的跳转。
下面就以vue为例子介绍我在权限管理方面做的尝试
另附上我使用vue-cli作为基础构建工具，结合markdown插件做的带登录、注册、在线保存功能的todolist，访问地址 http://vue.demozhan.com
权限管理以往解决办法
在以往的处理办法中，我一般使用的是服务器存储session，客户端存储cookie，当页面访问的时候会携带带有服务器sessionid的cookie信息，通过查询session做处理，已经登录的用户自动跳转，未登录的用户会跳转到登录页面。
上面这种方法适用于传统的网页跳转类型的网站，路由的相关处理其实是在服务器端，但对于单页网站，路由在前端处理的就不太合适了，因为前端页面的跳转是通过前端路由来完成的，特别是vue我发现，在地址栏输入url是完全被前端路由拦截了，根本不会向后台发送请求，react还是会发请求的（个人理解，如有不正确的地方请指出），所以无法通过携带cookie方式进行重定向来做权限管理。
vue解决前端路由的几种方式
vuex root状态树中保存登陆信息
有一种解决思路，在vuex存储登陆/认证信息，一旦登陆了state中就保留了登陆的信息。
但是这个方案存在一个问题，当用户刷新页面的时候状态树会被重置，用户登录的信息就不存在了。
异步查询状态方法
目前vue-cli-note解决权限管理的方法是通过异步查询状态的方法，即在页面初始化的时候会异步发送请求给服务器判断是否登录，目前的确可以解决权限的问题。
但这个方案也存在一个问题，页面需要发送很多不必要的http请求，我觉得这个方案不够优雅。