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

大家好，欢迎来到IT知识分享网。

1.场景

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

2.什么是token

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

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

3.token是用来干嘛的

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

大概的流程：

客户端使用用户名和密码请求登录(服务器–后端)

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); });