javascript 反应 axios 401 未授权
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54730396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React axios 401 unauthorized
提问by randal
I get a 401 error, when trying to authenticate a user. Just to give context, React is using an Express server, and using Passport for authentication. React has a port of 8001, and the Express server has the port of 8000.
尝试对用户进行身份验证时出现 401 错误。只是为了提供上下文，React 使用 Express 服务器，并使用 Passport 进行身份验证。React 的端口为8001，Express 服务器的端口为8000。
GET /api/users/user 401 2.167 ms - 59
GET /api/users/user 401 2.167 毫秒 - 59
Other get requests Do work. For example
其他 get 请求 做工作。例如
React
反应
export const getUser = () => {
return async (dispatch) =>{
Axios.get('/api/users/user')
.then( (res) => {
console.log(res.data);
localStorage.setItem('auth', res.data.authenticated);
dispatch({type: GET_USER, res});
}).catch( (err) => {
console.log(err);
})
}
}
axios
公理
import Axios from 'axios'
let AxiosInstance = Axios.create({
baseURL: process.env.REACT_APP_BASE_URL, // http://localhost:8000
withCredentials: true,
headers: {
'Content-Type': 'application/json',
},
})
// AxiosInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
AxiosInstance.interceptors.response.use(function(response) {
return response;
})
export default AxiosInstance
routes/user
路线/用户
router.get('/user', (req, res, next) => {
if(req.user) {
return res.status(200).json({
user: req.user,
authenticated: true
});
} else {
return res.status(401).json({
error: 'User is not authenticated',
authenticated: false
});
}
});
File app.js
文件app.js
var express = require('express');
var app = express();
var userRoute = require('./routes/users');
var postRoute = require('./routes/posts');
var bodyParser = require('body-parser');
var logger = require('morgan');
var models = require('./models');
var User = require('./models/user');
var session = require('express-session');
var cookieParser = require('cookie-parser') ;
var cookieSession = require('cookie-session');
var dotenv = require('dotenv');
var env = dotenv.config();
var cors = require('cors');
const port = process.env.PORT || 8000;
const passport = require('passport');
const path = require('path');
const allowOrigin = process.env.ALLOW_ORIGIN || '*'
// CORS Middleware
if (!process.env.PORT) {
require('dotenv').config()
}
if (!process.env.PORT) {
console.log('[api][port] 8000 set as default')
console.log('[api][header] Access-Control-Allow-Origin: * set as default')
} else {
console.log('[api][node] Loaded ENV vars from .env file')
console.log(`[api][port] ${process.env.PORT}`)
console.log(`[api][header] Access-Control-Allow-Origin: ${process.env.ALLOW_ORIGIN}`)
}
app.use(logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(cookieParser());
app.use(bodyParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors({
origin: process.env.ALLOW_ORIGIN,
credentials: true,
allowedHeaders: 'X-Requested-With, Content-Type, Authorization',
methods: 'GET, POST, PATCH, PUT, POST, DELETE, OPTIONS'
}))
app.use(session({
secret : 'nodeauthsecret',
resave: false,
saveUninitialized: true,
}));
app.use(passport.initialize());
app.use(passport.session());
require('./config/passport')(passport);
require('./config/passport-github')(passport);
app.use(function(req, res, next) {
res.locals.user = req.user; // This is the important line
console.log(res.locals.user);
next();
});
// app.use(function(req, res, next) {
// res.setHeader("Access-Control-Allow-Origin", "*");
// res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
// });
app.use('/api/users', userRoute )
app.use('/api/posts', postRoute )
app.listen(port, () => {
console.log('[api][listen] http://localhost:' + port)
})
passport.js
护照.js
const BCRYPT_SALT_ROUNDS = 12;
const passport = require('passport'),
bcrypt = require('bcrypt'),
JWTstrategy = require('passport-jwt').Strategy,
ExtractJWT = require('passport-jwt').ExtractJwt,
Sequelize = require('sequelize'),
Op = Sequelize.Op;
module.exports = function(passport, user) {
const models = require( '../models/index');
const localStrategy = require('passport-local').Strategy;
// serialize session, only store user id in the session information
passport.serializeUser(function(user, done) {
done(null, user.id);
});
// from the user id, figure out who the user is...
passport.deserializeUser(function(userId, done){
models.User
.find({ where: { id: userId } })
.then(function(user){
done(null, user);
}).catch(function(err){
done(err, null);
});
});
passport.use(
'register',
new localStrategy(
{
usernameField: 'username',
passwordField: 'password',
passReqToCallback: true,
session: false,
},
(req, username, password, done) => {
try {
models.User.findOne({
where: {
[Op.or]: [
{
username: username,
},
{ email: req.body.email },
],
},
}).then(user => {
if (user != null) {
console.log('username or email already taken');
return done(null, false, {
message: 'username or email already taken',
});
} else {
bcrypt.hash(password, BCRYPT_SALT_ROUNDS).then(hashedPassword => {
models.User.create({
username: req.body.username,
password: hashedPassword,
email: req.body.email
}).then(user => {
console.log('user created');
return done(null, user);
});
});
}
});
} catch (err) {
done(err);
}
},
),
);
passport.use(
'login',
new localStrategy(
{
usernameField: 'username',
passwordField: 'password',
session: false
},
(username, password, done, req) => {
try {
models.User.findOne({
where: {
[Op.or]: [
{
username: username,
}
],
},
}).then(user => {
if (user === null) {
return done(null, false, { message: 'Username doesn\'t exist' });
} else {
bcrypt.compare(password, user.password).then(response => {
if (response !== true) {
console.log('passwords do not match');
return done(null, false, { message: 'passwords do not match' });
}
console.log('user found & authenticated');
// note the return needed with passport local - remove this return for passport JWT
return done(null, user);
});
}
});
} catch (err) {
done(err);
}
},
),
);
const opts = {
jwtFromRequest: ExtractJWT.fromAuthHeaderWithScheme('JWT'),
secretOrKey: process.env.jwtsecret,
};
passport.use(
'jwt',
new JWTstrategy(opts, (jwt_payload, done) => {
try {
models.User.findOne({
where: {
username: jwt_payload._id,
},
}).then(user => {
if (user) {
console.log('user found in db in passport');
// note the return removed with passport JWT - add this return for passport local
done(null, user);
// console.log(user);
} else {
console.log('user not found in db');
done(null, false);
}
});
} catch (err) {
done(err);
}
}),
);
}
采纳答案by Manzurul Hoque Rumi
You are facing this because your req.useris empty that's why it goes to elsestatement and returns Unauthorizedwhich you are returning.
您正面临这个问题，因为您req.user是空的，这就是为什么它会转到您要返回的else语句并返回Unauthorized。
Check your server console if it is printing anything console.log(res.locals.user);
检查您的服务器控制台是否正在打印任何内容 console.log(res.locals.user);
Send your auth tokenwith headers like this
发送这样的auth token标题
headers : {
'Content-Type' : 'application/json',
'Accept' : 'application/json',
'Authorization' : 'Bearer <token_here>'
}
Updated
更新
Your request will always return 401 unauthorized.
您的请求将始终返回401 unauthorized。
https://github.com/manjurulhoque/nodejs-ecommerce-api/blob/master/routes/users.js#L105
https://github.com/manjurulhoque/nodejs-ecommerce-api/blob/master/routes/users.js#L105
Check my code. To get logged in user you have to use
检查我的代码。要获得登录用户，您必须使用
passport.authenticate('jwt', { session: false })
回答by Ahm.
I think you need to set the Authorizationin your headers, As mentioned in MDN
我认为您需要Authorization在标头中设置，如MDN 中所述
The HTTP Authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has responded with a
401 Unauthorized statusand the WWW-Authenticate header.
HTTP 授权请求标头包含用于向服务器验证用户代理的凭据，通常在服务器使用 a
401 Unauthorized status和 WWW-Authenticate 标头进行响应之后。
let ExtractJwt = passportJWT.ExtractJwt;
let Strategy = passportJWT.Strategy;
let opts = {}
opts.secretOrKey= cfg.jwtSecret
opts.jwtFromRequest= ExtractJwt.fromAuthHeaderWithScheme(cfg.authScheme)
new JWTstrategy(
...
return {
initialize: function() {
return passport.initialize();
},
authenticate: function() {
return passport.authenticate(cfg.authScheme, cfg.jwtSession);
}
};
)
