在前后端分离的应用中,前端需要使用Token来进行用户认证和权限控制。通常情况下,前端会将Token存储在Cookie或本地存储中,但是每次需要发送请求的时候都需要将Token放到请求头中,这样才能保证后端能够正确地识别用户身份。下面将从多个方面进行讲解。
一、前端每次请求都带Token
每个请求都需要携带Token是很麻烦的,因为这会导致代码冗余,而且如果忘记添加Token也会导致请求失败。因此,我们可以使用拦截器来自动添加Token,避免每次都手动添加。
//定义一个拦截器 const request = axios.create({ baseURL: 'https://api.example.com', timeout: 1000 * 60, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }); //添加一个请求拦截器 request.interceptors.request.use( config => { //从本地存储中获取Token const token = localStorage.getItem('token'); if (token) { //在请求头中携带Token config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); //发送请求 request.post('/users', { name: 'John Doe', age: 30 });
二、前端Token放在请求头
一般情况下,我们可以将Token放到请求头的Authorization字段中,这是一种标准的方式。同时,为了防止Token被截取或者泄露,可以使用HTTPS协议进行加密传输。
//定义一个请求头 const headers = { 'Content-Type': 'application/json;charset=UTF-8', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; //发送请求 axios.get('/users', { headers });
三、前端携带Token发送请求
有些API需要进行跨域请求,这时候我们可以使用jsonp来发送请求。在发送请求的时候,我们可以使用jQuery的ajax函数来携带Token。
$.ajax({ url: 'https://api.example.com/users', type: 'get', dataType: 'jsonp', jsonpCallback: 'callback', beforeSend: function(request) { //在请求头中携带Token request.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('token')}`); }, success: function(data) { console.log(data); } });
四、前端请求如何携带Token
在使用XMLHttpRequest或fetch发送请求时,我们需要手动添加Token到请求头中。
//使用XMLHttpRequest const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/users'); xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('token')}`); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(); //使用fetch fetch('https://api.example.com/users', { method: 'GET', headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }) .then(response => response.json()) .then(data => console.log(data));
五、前端请求带Token
我们可以通过在请求中添加Token参数的方式来发送请求。不过,在将Token作为参数的时候,需要注意参数名和值的格式要与后端要求一致。
axios.get('/users', { params: { access_token: localStorage.getItem('token') } });
总之,前端在发送请求时需要将Token添加到请求头中,这样才能保证后端能够正确识别用户身份。我们可以使用拦截器、请求头、携带Token等多种方式来实现。