React、Express、MongoDBでWebアプリケーションを作成しています。
そして、ヘッダー付きのjwtトークンを渡します。
しかし、私はそれを渡し、401エラー(無許可)を取得します。
Login 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を取り、1つの変数を同じように保存します。
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
})
note:最初の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'
}
});
これは、2番目のsetepアクセスであり、axiosInstanceはすでに作成し、dynamic 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 'は何でもかまいません。上記はヘッダーにトークンを設定するために使用されます