HTTP无状态与Vue下的解决方案

[LastPoem]

HTTP是无状态的

这是指协议对于交互性场景没有记忆能力。 举个例子： 1.点击一个纯HTML页面，发送请求获取HTML资源时每次返回的响应都是相同的。这就是一种无交互场景。在无交互场景中，无状态不会带来什么问题，因为无论是谁访问页面，内容都一样，每次请求也相互独立。 2.但是随着网络发展，在网页应用中，有些内容的访问是需要权限的。比如只有登录QQ空间你才能看到自己发的动态。此时无状态会带来很大的问题：当你登录成功后页面跳转到了首页。这时你在首页中点击相册，会返回错误信息。因为无状态，HTTP不知道你是谁，你又成了未登录的状态。

解决： HTTP本身是记不住你有没有登录的，因此需要前端告诉后端自己是否登录了。解决办法就是登录后后端返回一些验证信息，前端保存验证信息，下次再发送请求时把验证信息也放进去，后端拿到验证信息后发现是某个账号已经登录了，于是返回应有的响应。这个验证信息就放在Cookies里。而登录使用的验证信息一般都是token。

vue应用中的登录 在vue中，可以通过Vuex，localStorage, router以及axios共同实现登陆后一段时间内不需要再次输入用户名密码也能记住登录状态。 思路：

第一部分：存储token

1. 在vue登录页面里输入账号密码发送请求，返回的响应里带有token信息。说明登录成功。
2. 拿到token后通过this.$store.commit立即把token更新在store里（需要在store里设置state和mutations等）
3. token存到store里后立即保存到localStorage中。localStorage作为长期存储的文件永远不会消失。
4. 在store中，设置getters，把localStorage里的token赋给state里的token。因为当vue页面刷新或关闭后store里的数据全部回到原始状态。此时就可以利用localStorage特点解决这个问题。并且每次重新登录后也会更新localStorage。因此store不用担心token丢失，也能获取到最新的token。

以上保证了最新token的保存以及在vue各组件中都能访问到。

第二部分：路由设置

1. 在需要登录状态才能访问的路由里设置meta: requireAuth: true; 表示需要登录才有权限访问。
2. 设置路由守卫（路由钩子），在守卫里设置，存在token时则正常跳转路由，否则跳到登录页面。

以上确保了只有登录了才能访问内容。

第三部分：请求设置 在使用axios发送请求时设置请求拦截和响应拦截。 在使用axios时配置请求拦截，可以在请求前把token等信息放到请求头里以让后端验证。 配置响应拦截，这样在后端发现没有token或者token过期后返回401时就跳转到登录页面重新登录。

以上保证了后端对token的检验。