1. 11 | 登录前端实现
前端任务点，编写登录请求函数，和 用户注册 类似，前端拿到用户名和密码发起 POST 请求。
收到 token 如何持久化存储，如何让每次请求都携带 token 是这里的点。
用户登录的接口详情可以点 这里 。
这里有可以优化的点，未来可能需要添加验证码等附加信息，这个时候就需要添加函数参数，就会比较麻烦，可以将参数数据格式包装成一个对象。当然，这里还是使用第一种方法了。
这不是重点，重点是登录成功后，我们要做的事情。
按照接口约定，登录成功我们可以得到如下信息：
这里我们要用到 token 字段，是我们现在有 token 了，但一刷新就没了，所以我们要做一下持久化存储，你想存哪里就存哪里，只要你能找到。这里就存储 localStorage 中了，在 Chorme86 中你甚至可以存到一个本地的文本文件中，只不过读取速度比较慢罢了。
除了 token，我们还要将用户信息存下来，比如首页展示用的用户头像等信息。
关于本地信息的安全性问题，本地保存的用户信息并不作为数据请求的凭证，仅供展示使用，当用户更改本地的用户信息对于登录的状态不会有影响，因为后端的判断依据是 token，token 有效就登录成功，而不是说本地存储的用户信息是谁服务端就认为你是谁，前端是不可信的。这种登录方式的危险点在于用户 token 被盗，但这很难避免，最不安全的是人。。。
登录成功，返回首页，用户名或者是用户头像并没有同步更新，这是因为，这里是单页应用，你在 login 页面将登录用户信息存到 localStorage 中，然后跳转到了首页，此时页面没有刷新，而 localStorage 中的信息没有及时更新到 DOM 中，此时的用户信息还是你没有进入 login 页面的用户信息，自然是无法展示的，怎么解决呢？很简单，刷新一下。
当页面刷新时，用户信息会从 localStorage 中读取，显示的就是现在的登录用户了，但。。。
我不想刷新。
也很简单，搞成响应式数据就好了呀。来人呀，上Vuex。
当你将 token 存在 cookie 中，前端并不需要主动设置，默认就携带传给了服务端，而这里我们存到 Authorization 中，就需要我们设置一下，拦截请求，在请求发送前添加 token。
好的，来捋一捋流程。
用户访问 /login，被前端路由处理，指向Login.vue，用户看到登录框，填入自己的账号，当用户填写账号时，name password被实时监听，同时会对登录按钮的可操作产生影响，只有当用户将账密输入完整时，登录按钮可用。
前端收集用户信息，调用 network 中封装的 longin 请求函数，该请求发送前被拦截，添加 token，可能为空，使用账密登录时，token没实际效用。
后端检查成功给响应，前端将响应中数据的 token 通过触发 mutations 更新 Vuex 中 state，同时，将该 token 存到 localStorage，以免用户关掉页面导致 token 丢失。
登录成功跳到应用首页，用户头像等信息通过 Vuex 获取，因为 Vuex 中的数据是响应式的，此时从 login 跳转到首页，用户头像等信息也会得到相应的更新。
当用户新增文章时，只需向服务器传文章数据就可以了，而对于文章作者的相关信息则由后端从请求头中的 token 解析得到，这里需要注意，前端不要将本地的用户信息作为准确的作者信息，对于用户可以伪造的信息要做最小化的信任，用户完全有能力将本地用户名从张三改为李四，而最终作者是那个则需要由用户提供的 token 来判定，虽说 token 也有可能被伪造，但难度相对较大，往往是被窃取的可能性更大。
无密码登录其实还是需要“密码”的，只不过是换了一个临时性的对人不可读的字符串来代替罢了，并且每次请求帮你填好了。
在不考虑安全性的情况下本质上其实就是你将密码存到了浏览器里，然后你每次访问网站时让浏览器帮你输入用户名和密码，这个过程你是无感知的，这样自己就不用像个憨憨一样每次刷新就要填一遍表单。
填表是一件非常无聊的事。
要学一波 TypeScript 了呀。
2. SpringBoot+Vue项目中实现登录验证码校验
在各大项目中，为保证数据的安全性，通常在登录页面加入验证码校验，以防止爬虫带来的数据泄露危机。本文将介绍在前后端分离的项目中，怎样实现图形验证码校验。
第一步：在后端创建一个生成随机验证码的工具类和接收请求验证码的接口。工具类的主要作用生成随机验证码和对应的图片。接口的作用是将生成的随机验证码保存到session，同时，将图片进行base64编码，然后返回给前端。
第二步：在登录页面创建的同时获取验证码，并将后端传回来得key和编码后的字符串拼接，绑定img标签的src属性。此外，当用户点击验证码的img标签时，重新获取验证码，后端session更新验证码。
第三步：后端登录接口接收登录请求时，将用户提交的验证码和session中的验证码进行比对，不相同则返回相应信息给前端进行提示，相同则进行账号密码的匹配。
3. 前端 vue 已登陆用户怎么处理
可以尝试用vuex做状态管理，当用户登录成功之后，将状态信息存放在相应的本地（如果是web端可以定义一个cookie，设置一下过期时间，如果是移动端，可以尝试放在localstorage）。登录之前做阻塞，去做这个状态信息的检测，通过就登录。没通过就路由到登录界面
4. Vue项目中用户登录及token验证及流程图
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
简单举例说明：
① 调登录接口成功，在回调函数中将token存储到localStorage和vuex中（login.vue中）
② store文件夹下的index.js
③ 路由守卫（router文件夹下的index.js）
④ 请求头加token
⑤ 如果前端拿到状态码为401，就清除token信息并跳转到登录页面
流程图：