一.為什么要使用token
1.token完全有應(yīng)用管理抱究，它可以避開同源策略
2.token可以避免CSRF攻擊
3.token可以是無狀態(tài)的毕荐，可以在多個(gè)服務(wù)間共享
二.token的作用
1.防止表單重復(fù)提交
2.身份驗(yàn)證
三.token身份驗(yàn)證的使用-----前端
大概流程：
1.客戶端使用用戶名跟密碼請(qǐng)求登錄
2.服務(wù)端收到請(qǐng)求运沦，去驗(yàn)證用戶名與密碼
驗(yàn)證成功后胁出，服務(wù)端會(huì)簽發(fā)一個(gè) Token焙压，再把這個(gè) Token 發(fā)送給客戶端
3.客戶端收到 Token 以后可以把它存儲(chǔ)起來三娩，比如放在 Cookie 里或者 Local Storage 里
客戶端每次向服務(wù)端請(qǐng)求資源的時(shí)候需要帶著服務(wù)端簽發(fā)的 Token
4.服務(wù)端收到請(qǐng)求梯轻，然后去驗(yàn)證客戶端請(qǐng)求里面帶著的 Token，如果驗(yàn)證成功尽棕，就向客戶端返回請(qǐng)求的數(shù)據(jù)
5.前端使用token
(1).在驗(yàn)證登錄成功之后喳挑，將服務(wù)端返回來的token值存儲(chǔ)到sessionStorage中。代碼如下：
Axios.post(Api.user.userLogin,
{mgr_name:name,mgr_pwd:pwd}
).then((res)=>{
console.log(res)
if(res.status == 200){
if(res.data.code===200){
console.log('返回來的數(shù)據(jù)',res.data.data)
this.user = res.data.data;
this.token = res.data.token;
sessionStorage.setItem('token',JSON.stringify(res.data.data.token))
sessionStorage.setItem('user',JSON.stringify(res.data.data))
resolve('登錄成功')
}else if(res.data.code===500){
message.error(res.data.msg)
reject('登錄失敗')
}
}
}).catch((err)=>{
console.log('報(bào)錯(cuò)')
console.log(err)
})
})
(2)當(dāng)客戶端向服務(wù)端發(fā)起請(qǐng)求時(shí)滔悉，在請(qǐng)求頭中加入服務(wù)端返回來的token值伊诵，本文設(shè)置一個(gè)axios的攔截器，在該攔截器中設(shè)置token回官，這樣就可以不用在每次發(fā)起請(qǐng)求的時(shí)候曹宴，在請(qǐng)求頭中加token值
代碼如下：
import Axios from 'axios'
Axios.defaults.baseURL= '/api'
Axios.defaults.headers.post["Content-Type"]="application/json"
// 攔截Axios發(fā)起的所有請(qǐng)求
Axios.interceptors.request.use(
config=>{
const token = window.sessionStorage.getItem("token")
config.headers["token"] = token;
return config
},
err=>{
return Promise.reject(err);
}
);
//攔截Axios發(fā)起的所有請(qǐng)求.
Axios.interceptors.response.use((config)=>{
return config
});
export default Axios
