什么是token？token是用来干嘛的？怎么使用？

 💻 1.场景

用户登录成功后, 需要反复到服务器获取敏感数据，服务器对每次请求都要验证是哪位用户发送的, 且用户是否合法, 需要反复查询数据库, 对数据库造成过大压力

💻 2.什么是token

作为计算机术语时，是“令牌”的意思

Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码

💻 3.token是用来干嘛的

使用token机制的身份验证方法，在服务器端不需要存储用户的登录记录

大概的流程：

1. 客户端使用用户名和密码请求登录(服务器--后端)
2. 服务端收到请求，验证用户名和密码
3. 验证成功后，服务端(后台)会生成一个token，然后把这个token发送给客户端(前端)
4. 客户端收到token后把它存储起来，可以放在cookie或者Local Storage（本地存储）里
5. 客户端每次向服务端发送请求的时候都需要带上服务端发给的token(客户端--前端)
6. 服务端收到请求，然后去验证客户端请求里面带着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.js

import Cookies from 'js-cookie'
// 方法封装设置token
export let setCookie = (token)=>{
   return Cookies.set('hgtoken', token)
}
// 获取token
export let getCookie = ()=>{
    return Cookies.get('hgtoken')
 }
//  移除token
export 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)