问题描述
我是新来的反应者，我一直在尝试使此api正常工作（（在您的教程之后）， 当我通过邮递员测试路线时，收到的响应是“可以正常工作” ，但是当我尝试从我的React应用登录时，它 变成了未经授权的 ，我不知道该如何处理* ** 我已尽我所能来做所有可能的事情 ***，我已经尽我所能探索了尽可能多的堆栈溢出情况，但仍然没有找到足够可理解的东西。
>p.s对我来说这是一个非常关键的问题，因为这是我在大学网络课程中的一部分，并且拥有很高的成绩！
在需要时也将链接附加到github目录： https://github.com/nescafestar/twitter-clone
这是我的AuthActions.js文件
```
//authAction.js
import axios from 'axios';
import {GET_ERRORS,SET_CURRENT_USER} from '../constants';
import setAuthHeader from '../utils/setAuthHeader'
export const registerUser = (userData,history) => dispatch => {
axios.post('http://localhost:5000/api/users/register',userData,{
headers: {
'Authorization': 'Bearer'+ localStorage.getItem('jwtToken')
}
})
.then(res => {
console.log('----> registering')
const { token } = res.data
localStorage.setItem('jwtToken',token)
if(token){
axios.defaults.headers.common['Authorization']='Bearer : '+ token
}
history.push('/')})
.catch(err => dispatch({
type: GET_ERRORS,payload: err.response.data
}))
}
export const loginUser = (userData) => dispatch => {
axios.post('http://localhost:5000/api/users/login',{
headers: {
'Authorization': 'Bearer : ' +localStorage.getItem('jwtToken')
}
})
.then(res => {
// console.log(userData)
const { token } = res.data
localStorage.setItem('jwtToken',token)
if(token){
axios.defaults.headers.common['Authorization']='Bearer : ' +token
}
console.log('---> hit dispatch')
dispatch(getCurrentUser())
})
.catch(err => {
// console.log(err);
// dispatch({
// type: GET_ERRORS,// payload: err.response.data
// })
})
}
export const getCurrentUser = () => dispatch => {
axios.get('http://localhost:5000/api/users',{
headers: {
'Authorization': 'Bearer : ' +localStorage.getItem('jwtToken')
}
})
.then(res => dispatch(setCurrentUser(res.data)))
.catch(err => dispatch({
type: GET_ERRORS,payload: err.response.data
}))
}
export const setCurrentUser = (data) => {
console.log('----> setting user!')
return {
type: SET_CURRENT_USER,payload: data
}
}
export const logoutUser=()=>dispatch=>{
localStorage.removeItem('jwtToken')
setAuthHeader()
dispatch(setCurrentUser())
}
```
this is the set Auth Header one:
```
import axios from 'axios'
// const jsonwebtoken=require('jsonwebtoken')
export default function(token){
console.log(token)
if(token){
console.log('Token has been set-properly')
return axios.defaults.headers.common['Authorization']='Bearer'+ token
}else{
return axios.defaults.headers.common['Authorization']=null
}
}
```
最后这是我的POST.js文件，该文件也返回未经授权的相同问题
import axios from 'axios'
// const jsonwebtoken=require('jsonwebtoken')
export default function(token){
console.log(token)
if(token){
console.log('Token has been set-properly')
return axios.defaults.headers.common['Authorization']='Bearer'+ token
}else{
return axios.defaults.headers.common['Authorization']=null
}
}
``` ```
////////////////////////*** ROUTER ***
``` ```
// also the Routes/User.js file in case someone wants to kNow about it as well
const router = require("express").Router();
const User = require("../models/User");
const jwt=require('jsonwebtoken');
const passport = require("passport");
//validation
const validateRegisterInput = require("../validation/register");
const validateLoginInput = require("../validation/login");
//handling password hasing
const bcrypt = require("bcryptjs");
// const utils = require("../utils/utils");
//routing requests
//handling post request
router.route("/register").post((req,res) => {
const { isValid,errors } = validateRegisterInput(req.body);
if (!isValid) {
return res.status(404).json(errors);
}
//test arguments
// return res.send('OKKKK!!');
//register user is it does not exist in db
User.findOne({ email: req.body.email }).then((user) => {
if (user) {
errors.email = "Email already Registered!";
return res.status(404).json(errors);
}
bcrypt.genSalt(10,function (err,salt) {
bcrypt.hash(req.body.password,salt,hash) {
//adding new User to DB is Not Exist
const newMember = new User({
username: req.body.username,email: req.body.email,password: hash,});
newMember
.save()
.then((newMember) => res.json(newMember))
.catch((err) => console.log(err));
});
});
});
}); //register route ends
//Login Route
router.route('/login')
.post((req,res) => {
const { errors,isValid } = validateLoginInput(req.body)
if (!isValid) {
return res.status(404).json(errors)
}
User.findOne({ email: req.body.email })
.then(user => {
if (!user) {
errors.email = 'User not found/not exist'
return res.status(404).json(errors)
} else {
bcrypt.compare(req.body.password,user.password)
.then(isMatch => {
if (isMatch) {
const token = jwt.sign({ id: user._id },process.env.SECRET,{ expiresIn: '1d' },token) {
return res.json({
success: true,token: token
})
})
} else {
errors.password = 'Password is incorrect'
return res.status(404).json(errors)
}
})
}
})
})
//returning route for logged in user
router.route('/')
.get( passport.authenticate('jwt',{ session: false }),(req,res) => {
console.log('here! in home redirect')
res.json({
_id: req.user._id,email: req.user.email,username: req.user.username,followers: req.user.followers,following: req.user.following
})
})
module.exports = router;
解决方法
您没有一致或正确地填充Authorization标头。为简单起见，假设您的jwtToken值为AAAA。在某些情况下，您发送BearerAAAAAA，在其他情况下，您发送Bearer : AAAA。标准应使用字符串“ Bearer”，后接一个空格，后接令牌（Bearer AAAA）的base64编码。有关更多信息，请参见RFC：https://tools.ietf.org/html/rfc6750
设置标头时，您可以使用以下内容：
const token = localStorage.getItem('jwtToken') //Or however you choose to get it
const headers = {
Authorization: `Bearer ${token}`
}