关于reactjs：如何通过Axios传递Header JWT令牌


How to pass Header JWT Token with Axios & React?

我使用React，Express，MongoDB制作Web应用程序。

而且，我想通过标头传递jwt令牌。

但是，我通过了它，得到401错误(未经授权)。

在登录actions.js中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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服务器中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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
2
let user = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id;

现在您有了令牌并传入标头并获得响应中的数据

1
2
3
4
5
6
7
8
9
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中设置空白项目数组，例如

1
2
3
4
5
6
this.state={
            items:[],
            isLoaded: false,
            redirectToReferrer:false,
            token:''
        }

按如下所示将您的令牌作为授权密钥。

1
2
3
4
5
6
7
8
9
10
11
12
13
axios.post(url,data, {
    headers: {
        'authorization': your_token,
        'Accept' : 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(response => {
    // return  response;
})
.catch((error) => {
    //return  error;
});

如何通过axios反应传递标题jwt令牌???

这是使用API??基本URL和JWT_TOKEN创建axios实例的示例
全局访问它，以进行不同的API调用

步骤1：为axios创建静态实例

1
2
3
4
5
6
7
8
static axiosInstance =  axios.create({
    baseURL:"BASE_API_URL",
    timeout: 5000,
    headers: {
      'Authorization':"JWT_TOKEN",
      'Content-Type': 'application/json'
    }
  });

这是axiosInstance已经创建并用于动态REST API调用的第二个setep访问

第2步：访问静态实例并将API_URL绑定到基本URL

1
2
3
4
5
6
7
8
9
10
11
12
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'，令牌).send()
'x-auth'可以是任何东西。上面的用于在标头中设置令牌