[英]How to pass Header JWT Token with Axios & React?
我使用 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;
});
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 ,非常干净、清晰和有效。
试试 res.header('x-auth', token).send() 'x-auth' 可以是任何东西。 以上用于在标题中设置令牌
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.