新聞中心
在了解到cookie、session、token的作用后學(xué)習(xí)token的使用
cookie
cookie是隨著url將參數(shù)發(fā)送到后臺,安全性最低,并且大小受限,不超過4kb左右,它的數(shù)據(jù)保存在客戶端
session
session數(shù)據(jù)保存在服務(wù)端,在內(nèi)存中開辟空間存儲數(shù)據(jù),session文件名即sessionID保存在cookie內(nèi),隨cookie傳送到服務(wù)端后在服務(wù)端匹配session文件
token
token是服務(wù)端的一種算法,如果登錄成功,服務(wù)端就會根據(jù)算法生成一個字符串,將字符串傳遞回客戶端。這個字符串就是token,安全性最高
以上都有可能受到CSRF攻擊
axios攔截器會在發(fā)送請求前先進(jìn)行處理,將token放進(jìn)key中保存在請求頭中,這個key是前后臺約定好的。這樣配置好后,每次發(fā)送請求的時候,請求頭都會帶上token傳送到后臺進(jìn)行校驗。
axios的特點(官網(wǎng))
- 支持瀏覽器和node.js
- 支持promise
- 能攔截請求和響應(yīng)
- 能轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
- 能取消請求
- 自動轉(zhuǎn)換JSON數(shù)據(jù)
- 瀏覽器端支持防止CSRF(跨站請求偽造)
方法一:我們在使用axios請求的時候可以先獲取我們已經(jīng)存入localStorage里的token
然后在攔截器里使用[…]進(jìn)行拼接
import axios from 'axios'; import qs from 'qs'; axios.defaults.baseURL = process.env.VUE_APP_BASE_API; let token = localStorage.getItem('token') // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent //console.log(config) if(config.method==='post'){ config.data=qs.stringify({ token:token, ...config.data }) }else if(config.method==='get'){ config.params={ token:token, ...config.params } } return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Do something with response data return response; }, function (error) { // Do something with response error return Promise.reject(error); }); class http{ static get(url,params){ return axios.get(url,params) } static post(url,params){ return axios.post(url,params) } } export default http;
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章名稱:Vue中axios攔截器如何單獨(dú)配置token-創(chuàng)新互聯(lián)
URL地址:http://ef60e0e.cn/article/ppcse.html