我使用React,Express,MongoDB制作Web应用程序。
而且,我想通过标头传递jwt标记。
但是,我通过它,得到401错误(未经授权)。
在登录actions.js中:
export function login(username, password) {
return function(dispatch) {
axios
.post(`${API_URL}/auth/login`, { username, password })
.then(res => {
dispatch(loginSuccess(res.data, username));
const token = res.data.token;
axios.defaults.headers.common["Authorization"] = token;
history.push("/");
})
.catch(err => {
if (err.response.status === 401) {
dispatch(loginFailure(err));
}
});
};
}
而且,在我的服务器post.js中:
getToken = function(headers) {
if (headers && headers.authorization) {
var parted = headers.authorization.split(" ");
if (parted.length === 2) {
return parted[1];
} else {
return null;
}
} else {
return null;
}
};
...
// Save Post
router.post("/", passport.authenticate("jwt", { session: false }),
function(
req,
res,
next
) {
var token = getToken(req.headers);
if (token) {
Post.create(req.body, function(err, post) {
if (err) return next(err);
res.json(post);
});
} else {
return res.status(403).send({ success: false, msg: "Unauthorized." });
}
});
我该怎么办呢? +登录成功
首先,当您登录并向后端发送用户名和密码时,您将获得token_id。现在尝试在session_storage中标记商店并重定向到您想要的页面。现在你把token_id放在你想要的页面中并存储一个变量就像..
let user = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id;
现在你有令牌并传入标题并获取响应数据
const api = `your api here`
axios.get(api, { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
this.setState({
items: res.data, /*set response data in items array*/
isLoaded : true,
redirectToReferrer: false
})
注意:您应该在初始setState中设置空白项数组
this.state={
items:[],
isLoaded: false,
redirectToReferrer:false,
token:''
}
将您的令牌包含为授权密钥,如下所示。
axios.post(url,data, {
headers: {
'authorization': your_token,
'Accept' : 'application/json',
'Content-Type': 'application/json'
}
})
.then(response => {
// return response;
})
.catch((error) => {
//return error;
});
尝试res.header('x-auth',token).send()'x-auth'可以是任何东西。上面用于在标题中设置标记
how-to-pass-header-jwt-token-with-axios-react ???
这是创建具有API Base URL和JWT_TOKEN的axios实例的示例,并为不同的API调用访问它
第1步:为axios创建静态实例
static axiosInstance = axios.create({
baseURL: "BASE_API_URL",
timeout: 5000,
headers: {
'Authorization': "JWT_TOKEN",
'Content-Type': 'application/json'
}
});
这是第二个setep访问axiosInstance已经创建并使用动态REST API调用
第2步:访问静态实例并将API_URL绑定到基本URL
export const x = (data) => dispatch => {
axiosInstance.post('API_URL',
{
PLAYLOAD
})
.then(function (response) {
})
.catch(function (error) {
});
}
所有的API URL = BASE_API_URL + API_URL和单个JWT_TOKEN,这非常干净,清晰且有效。