在许多 Web 应用程序中,身份验证是非常重要的。当用户进行登录后,服务器会向客户端颁发一个身份验证凭证,以标识该用户已成功登录,并且具有一定的权限。这个身份验证凭证通常就是 JWT(JSON Web Token)。
为了在后续的请求中继续保持用户的登录状态和权限,客户端(通常是浏览器)需要将该身份验证凭证(JWT token)发送给服务器。这时就需要通过请求头来传递这个 JWT token。
1.将后端返回的token值存储在localStorage中,token 存储在名为 "jwt"
的 localStorage 键中
const res = await reqLogin(this.form);
const token=res.token;
localStorage.setItem("jwt", token);
2.在函数中返回localStorage里面存储的token
function getJWTToken() {
const token = localStorage.getItem("jwt");
return token;
}
3.在请求拦截器里面,设置token到请求头,这里我写在js文件中。
request.interceptors.request.use((config) => {
const token = getJWTToken();
config.headers["Content-Type"] = "application/json;charset=utf-8";
if (token) {
config.headers["jwt"] = token;
}
return config;
}, e => Promise.reject(e))
这是js文件完整的代码
import axios from "axios";
import nProgress from 'nprogress';
import 'nprogress/nprogress.css'
const request = axios.create({
baseURL: '你的服务器地址'
})
function getJWTToken() {
const token = localStorage.getItem("jwt");
return token;
}
request.interceptors.request.use((config) => {
nProgress.start()
const token = getJWTToken();
config.headers["Content-Type"] = "application/json;charset=utf-8";
if (token) {
config.headers["jwt"] = token;
}
return config;
}, e => Promise.reject(e))
request.interceptors.response.use((res) => {
nProgress.done()
return res.data
}, e => Promise.reject(e))
export default request
其中config.headers[""]这里面的值要看后端设置的是什么,我这里是jwt。