💻 1.场景
用户登录成功后, 需要反复到服务器获取敏感数据，服务器对每次请求都要验证是哪位用户发送的, 且用户是否合法, 需要反复查询数据库, 对数据库造成过大压力
💻 2.什么是token
作为计算机术语时，是“令牌”的意思
Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码
💻 3.token是用来干嘛的
使用token机制的身份验证方法，在服务器端不需要存储用户的登录记录
大概的流程：
- 客户端使用用户名和密码请求登录(服务器--后端)
- 服务端收到请求，验证用户名和密码
- 验证成功后，服务端(后台)会生成一个token，然后把这个token发送给客户端(前端)
- 客户端收到token后把它存储起来，可以放在cookie或者Local Storage（本地存储）里
- 客户端每次向服务端发送请求的时候都需要带上服务端发给的token(客户端--前端)
- 服务端收到请求，然后去验证客户端请求里面带着token，如果验证成功，就向客户端返回请求的数据
- 这个token必须在每次请求时传递给服务器，应该保存在请求头里，另外服务器要支持CORS(跨域资源共享)的策略
🌱token使用小结
- 前端登陆的时候向服务器发送请求，服务器验证成功，会生成一个token
- 前端会存储这个token，放在session或cookie中，用于之后的业务请求身份验证
- 拿着这个token，可以在当前登录的账号下进行请求业务，发送请求时，token会放在请求头里，服务器收到这个业务请求，验证token，成功就允许这个请求获取数据
- token可以设置失效期，超时需要重新登录
💻 4.优势 (相较于cookie)
- 支持跨域访问: cookie是不允许跨域访问的, token支持
- 无状态: token不需要服务器保存任何相关信息. token自身就携带所有值
- 去耦: 不需要绑定特定的身份验证方案
- 更适合移动应用: cookie不支持手机端访问
- 基于标准化:JWT
💻 5.缺陷
- 占带宽: 比session_id 大, 消耗更多的流量
- 无法在服务端注销: 很难解决劫持问题
- 性能问题: JWT标准消耗更多的 CPU 资源
💻 6.常见使用
1.localStorage存储
请求拦截中进行存储
//utils中request.js中添加拦截器// 添加请求拦截器service.interceptors.request.use(function (config) { // 在发送请求之前做些什么 // console.log('config', config); config.headers = { 'token': localStorage.getItem('token') } return config;}, function (error) { // 对请求错误做些什么 return Promise.reject(error);});// 添加响应拦截器service.interceptors.response.use(function (response) { // 对响应数据做点什么 if (response.data.status == 200) { return response; } else { router.push({ path: '/login' }) }}, function (error) { // 对响应错误做点什么 return Promise.reject(error);});2.插件 js-cookie
npm install js-cookie//utils下创建auth.jsimport Cookies from 'js-cookie'// 方法封装设置tokenexport let setCookie = (token)=>{ return Cookies.set('hgtoken', token)}// 获取tokenexport let getCookie = ()=>{ return Cookies.get('hgtoken') }// 移除tokenexport let removeCookie = ()=>{ return Cookies.remove('hgtoken') }//utils下的request.js中添加拦截器// 添加请求拦截器service.interceptors.request.use(function (config) { // 在发送请求之前做些什么 config.headers['hg_token'] = getCookie('hgtoken') return config;}, function (error) { // 对请求错误做些什么 return Promise.reject(error);});// 添加响应拦截器service.interceptors.response.use(function (response) { // 对响应数据做点什么 if (response.data.status == 200) { return response; } else { router.push({ path: '/login' }) }}, function (error) { // 对响应错误做点什么 return Promise.reject(error);});//login.vue页面import {setCookie} from '@/utils/auth'// 登录接口成功回调中setCookie(res.data.token)
