💻 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.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)