这里是在简书仿简书的第十一篇，早睡早起身体好
前端任务点，编写登录请求函数，和 用户注册 类似，前端拿到用户名和密码发起 POST 请求。
收到 token 如何持久化存储，如何让每次请求都携带 token 是这里的点。
用户登录的接口详情可以点 这里。
// network/user.js
// 用户登录
export function login(name, password) {
return request({
method: "post",
url: '/login',
data: {
name,
password
},
})
}
这里有可以优化的点，未来可能需要添加验证码等附加信息，这个时候就需要添加函数参数，就会比较麻烦，可以将参数数据格式包装成一个对象。当然，这里还是使用第一种方法了。
// network/user.js
// 也可以
// 用户登录
export function login(user) {
return request({
method: "post",
url: '/login',
data: user
})
}
这不是重点，重点是登录成功后，我们要做的事情。
按照接口约定，登录成功我们可以得到如下信息：
{
"status": 200,
"data": {
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZjlhMjMyYzc1ZWYwY2RkNzAxN2RlY2YiLCJuYW1lIjoiMjMzIiwiaWF0IjoxNjAzOTM3MjM2LCJleHAiOjE2MDQwMjM2MzZ9.2FEs4iLPKhOdpXjWswE57tWYIh7QY-LQgAwb18ILwYo",
"user": {
"gender": "male",
"bio": "该用户没有给自己编写简介",
"avatar": "/uploads/default_avatar.png",
"_id": "5f9a232c75ef0cdd7017decf",
"name": "233",
"createdAt": "2020-10-29T02:04:28.599Z",
"updatedAt": "2020-10-29T02:04:28.599Z"
}
}
}
这里我们要用到 token 字段，是我们现在有 token 了，但一刷新就没了，所以我们要做一下持久化存储，你想存哪里就存哪里，只要你能找到。这里就存储 localStorage 中了，在 Chorme86 中你甚至可以存到一个本地的文本文件中，只不过读取速度比较慢罢了。
除了 token，我们还要将用户信息存下来，比如首页展示用的用户头像等信息。
关于本地信息的安全性问题，本地保存的用户信息并不作为数据请求的凭证，仅供展示使用，当用户更改本地的用户信息对于登录的状态不会有影响，因为后端的判断依据是 token，token 有效就登录成功，而不是说本地存储的用户信息是谁服务端就认为你是谁，前端是不可信的。这种登录方式的危险点在于用户 token 被盗，但这很难避免，最不安全的是人。。。
登录成功，返回首页，用户名或者是用户头像并没有同步更新，这是因为，这里是单页应用，你在 login 页面将登录用户信息存到 localStorage 中，然后跳转到了首页，此时页面没有刷新，而 localStorage 中的信息没有及时更新到 DOM 中，此时的用户信息还是你没有进入 login 页面的用户信息，自然是无法展示的，怎么解决呢？很简单，刷新一下。
当页面刷新时，用户信息会从 localStorage 中读取，显示的就是现在的登录用户了，但。。。
我不想刷新。
也很简单，搞成响应式数据就好了呀。来人呀，上Vuex。
// state
user: JSON.parse(localStorage.getItem('user')) || {},
token: localStorage.getItem('token') || '',
// mutations
set_token(state, token) {
state.token = token;
localStorage.setItem("token", token);
},
setUser(state, user) {
// 拿到完整的图片地址
user.avatar = state.imgBaseUrl + user.avatar
state.user = user;
localStorage.setItem('user', JSON.stringify(user));
// localStorage 注意格式转换
},
当你将 token 存在 cookie 中，前端并不需要主动设置，默认就携带传给了服务端，而这里我们存到 Authorization 中，就需要我们设置一下，拦截请求，在请求发送前添加 token。
// network/request.js
// 2. 请求拦截器，添加jwt token
instance.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}` || ''
// 每个请求都重新设置有点耗费资源，一般token发生改变会是换账号登录，或token过期，可能会有更好的方案。
return config
}, err => {
})
好的，来捋一捋流程。
用户访问 /login，被前端路由处理，指向Login.vue，用户看到登录框，填入自己的账号，当用户填写账号时，name password被实时监听，同时会对登录按钮的可操作产生影响，只有当用户将账密输入完整时，登录按钮可用。
前端收集用户信息，调用 network 中封装的 longin 请求函数，该请求发送前被拦截，添加 token，可能为空，使用账密登录时，token没实际效用。
后端检查成功给响应，前端将响应中数据的 token 通过触发 mutations 更新 Vuex 中 state，同时，将该 token 存到 localStorage，以免用户关掉页面导致 token 丢失。
登录成功跳到应用首页，用户头像等信息通过 Vuex 获取，因为 Vuex 中的数据是响应式的，此时从 login 跳转到首页，用户头像等信息也会得到相应的更新。
当用户新增文章时，只需向服务器传文章数据就可以了，而对于文章作者的相关信息则由后端从请求头中的 token 解析得到，这里需要注意，前端不要将本地的用户信息作为准确的作者信息，对于用户可以伪造的信息要做最小化的信任，用户完全有能力将本地用户名从张三改为李四，而最终作者是那个则需要由用户提供的 token 来判定，虽说 token 也有可能被伪造，但难度相对较大，往往是被窃取的可能性更大。
无密码登录其实还是需要“密码”的，只不过是换了一个临时性的对人不可读的字符串来代替罢了，并且每次请求帮你填好了。
在不考虑安全性的情况下本质上其实就是你将密码存到了浏览器里，然后你每次访问网站时让浏览器帮你输入用户名和密码，这个过程你是无感知的，这样自己就不用像个憨憨一样每次刷新就要填一遍表单。
填表是一件非常无聊的事。
要学一波 TypeScript 了呀。
