错误：无法匹配任何路由。 URL段：“配置文件”或加载资源失败：服务器响应状态为401（未经授权）
我正在为MEANAUTH应用程序工作，我想使用angular jwt访问用户个人资料，当我尝试登录并访问用户个人资料https://localhost:3000/prifile我得到Failed to load resource: the server responded with a status of 401 (Unauthorized)或当我尝试使用这些URL`http://localhost://localhost:3000/users/profile`时`，我收到此错误未捕获（承诺）：错误：无法匹配任何路由。网址段：“用户/个人资料”错误：无法匹配任何路线。网址段：“用户/个人资料”
这是我的代码
auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
authToken: any;
user: any;
constructor(private http: HttpClient) { }
registerUser(user){
let headers = new HttpHeaders();
headers.append('Content-Type','application/json');
return this.http.post('http://localhost:3000/users/register', user , {headers: headers})
.map(res => res);
}
authenticateUser(user):Observable<any>{
let headers = new HttpHeaders();
headers.append('Content-Type','application/json');
return this.http.post('http://localhost:3000/users/authenticate', user , {headers: headers})
.map(res => res);
}
getProfile():Observable<any>{
let headers = new HttpHeaders();
this.loadToken();
headers.append('Authorization', this.authToken);
headers.append('Content-Type','application/json');
return this.http.get('http://localhost:3000/users/profile', {headers: headers})
.map(res => res);
}
storeUserDate(token, user){
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}
loadToken(){
const token = localStorage.getItem('id_token');
this.authToken = token;
}
logout(){
this.authToken = null;
this.user = null;
localStorage.clear();
}
}
profileponent.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-profile',
templateUrl: './profileponent.html',
styleUrls: ['./profileponent.css']
})
export class ProfileComponent implements OnInit {
user: Object;
constructor(private authService: AuthService, private router: Router) { }
ngOnInit() {
this.authService.getProfile().subscribe(profile => {
this.user = profile.user;
},
err => {
console.log(err);
return false;
});
}
}
profile.html
<div *ngIf="user">
<h2 class="page-header">{{user.name}}</h2>
<ul class="list-group">
<li class="list-group-item">Username : {{user.username}}</li>
<li class="list-group-item">Email : {{user.email}}</li>
</ul>
</div>
这是我的护照restApi代码，我的rest应用程序运行正常，但是当我尝试与angular client集成时，它将显示err。
users.js
const express = require("express");
const router = express.Router();
const passport = require("passport");
const jwt = require("jsonwebtoken");
const config = require("../config/database");
const User = require("../models/user");
//Register
router.post("/register", (req, res, next) => {
//res.send('REGISTER');
let newUser = new User({
name: req.body.name,
email: req.body.email,
username: req.body.username,
password: req.body.password
});
User.addUser(newUser, (err, user) => {
if (err) {
res.json({ success: false, msg: "Failed to register user" });
} else {
res.json({ success: true, msg: "User registered" });
}
});
});
//Authenticate
router.post("/authenticate", (req, res, next) => {
//res.send('AUTHENTICATE');
const username = req.body.username;
const password = req.body.password;
User.getUserByUsername(username, (err, user) => {
if (err) throw err;
if (!user) {
return res.json({ success: false, msg: "User not found!" });
}
UserparePassword(password, user.password, (err, isMatch) => {
if(err) throw err;
if(isMatch){
const token = jwt.sign({
type: "user",
data:{
_id: user._id,
name: user.name,
username: user.username,
email: user.email
}
},config.secret,{
expiresIn: 604800
}
);
return res.json({
success: true,
token: "JWT "+ token,
user:{
id: user._id,
name: user.name,
username: user.username,
email: user.email
}
});
}else{
return res.json({
success: true,
msg: "Worng Password."
});
}
});
});
});
//Profile
router.get("/profile", passport.authenticate('jwt', {session: false}), (req, res, next) => {
// res.send("PROFILE");
res.json({user: req.user});
});
/* router.get("/profile", passport.authenticate('jwt', {session: false}), (req,res) =>{
console.log(req.user);
return res.json(
req.user
);
})
*/
module.exports = router;
passport.js
const JwtStrategy = require('passport-jwt').Strategy;
const ExtractJwt = require('passport-jwt').ExtractJwt;
const User = require('../models/user');
const config = require('../config/database');
module.exports = function(passport){
let opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('jwt');
opts.secretOrKey = config.secret;
passport.use(new JwtStrategy(opts, (jwt_payload, done) => {
User.getUserById(jwt_payload.data._id, (err, user) => {
if(err){
return done(err, false);
}
if(user){
return done(null, user);
}else{
return done(null, false);
}
});
})
);
}
非常感谢。.>
我正在为MEANAUTH应用程序工作，当我尝试登录并访问用户配置文件https：// localhost：3000 / prifilei时无法加载...，我想使用angular jwt访问用户配置文件...
回答如下：因为登录或注册时会得到jwt令牌作为响应，将其存储到localstorage中，并且当您在那时对用户配置文件进行api调用时，从localstorage中获取该jwt令牌并附加标题。我希望它可以工作给你。
错误：无法匹配任何路由。 URL段：“配置文件”或加载资源失败：服务器响应状态为401（未经授权）
我正在为MEANAUTH应用程序工作，我想使用angular jwt访问用户个人资料，当我尝试登录并访问用户个人资料https://localhost:3000/prifile我得到Failed to load resource: the server responded with a status of 401 (Unauthorized)或当我尝试使用这些URL`http://localhost://localhost:3000/users/profile`时`，我收到此错误未捕获（承诺）：错误：无法匹配任何路由。网址段：“用户/个人资料”错误：无法匹配任何路线。网址段：“用户/个人资料”
这是我的代码
auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
authToken: any;
user: any;
constructor(private http: HttpClient) { }
registerUser(user){
let headers = new HttpHeaders();
headers.append('Content-Type','application/json');
return this.http.post('http://localhost:3000/users/register', user , {headers: headers})
.map(res => res);
}
authenticateUser(user):Observable<any>{
let headers = new HttpHeaders();
headers.append('Content-Type','application/json');
return this.http.post('http://localhost:3000/users/authenticate', user , {headers: headers})
.map(res => res);
}
getProfile():Observable<any>{
let headers = new HttpHeaders();
this.loadToken();
headers.append('Authorization', this.authToken);
headers.append('Content-Type','application/json');
return this.http.get('http://localhost:3000/users/profile', {headers: headers})
.map(res => res);
}
storeUserDate(token, user){
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}
loadToken(){
const token = localStorage.getItem('id_token');
this.authToken = token;
}
logout(){
this.authToken = null;
this.user = null;
localStorage.clear();
}
}
profileponent.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-profile',
templateUrl: './profileponent.html',
styleUrls: ['./profileponent.css']
})
export class ProfileComponent implements OnInit {
user: Object;
constructor(private authService: AuthService, private router: Router) { }
ngOnInit() {
this.authService.getProfile().subscribe(profile => {
this.user = profile.user;
},
err => {
console.log(err);
return false;
});
}
}
profile.html
<div *ngIf="user">
<h2 class="page-header">{{user.name}}</h2>
<ul class="list-group">
<li class="list-group-item">Username : {{user.username}}</li>
<li class="list-group-item">Email : {{user.email}}</li>
</ul>
</div>
这是我的护照restApi代码，我的rest应用程序运行正常，但是当我尝试与angular client集成时，它将显示err。
users.js
const express = require("express");
const router = express.Router();
const passport = require("passport");
const jwt = require("jsonwebtoken");
const config = require("../config/database");
const User = require("../models/user");
//Register
router.post("/register", (req, res, next) => {
//res.send('REGISTER');
let newUser = new User({
name: req.body.name,
email: req.body.email,
username: req.body.username,
password: req.body.password
});
User.addUser(newUser, (err, user) => {
if (err) {
res.json({ success: false, msg: "Failed to register user" });
} else {
res.json({ success: true, msg: "User registered" });
}
});
});
//Authenticate
router.post("/authenticate", (req, res, next) => {
//res.send('AUTHENTICATE');
const username = req.body.username;
const password = req.body.password;
User.getUserByUsername(username, (err, user) => {
if (err) throw err;
if (!user) {
return res.json({ success: false, msg: "User not found!" });
}
UserparePassword(password, user.password, (err, isMatch) => {
if(err) throw err;
if(isMatch){
const token = jwt.sign({
type: "user",
data:{
_id: user._id,
name: user.name,
username: user.username,
email: user.email
}
},config.secret,{
expiresIn: 604800
}
);
return res.json({
success: true,
token: "JWT "+ token,
user:{
id: user._id,
name: user.name,
username: user.username,
email: user.email
}
});
}else{
return res.json({
success: true,
msg: "Worng Password."
});
}
});
});
});
//Profile
router.get("/profile", passport.authenticate('jwt', {session: false}), (req, res, next) => {
// res.send("PROFILE");
res.json({user: req.user});
});
/* router.get("/profile", passport.authenticate('jwt', {session: false}), (req,res) =>{
console.log(req.user);
return res.json(
req.user
);
})
*/
module.exports = router;
passport.js
const JwtStrategy = require('passport-jwt').Strategy;
const ExtractJwt = require('passport-jwt').ExtractJwt;
const User = require('../models/user');
const config = require('../config/database');
module.exports = function(passport){
let opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('jwt');
opts.secretOrKey = config.secret;
passport.use(new JwtStrategy(opts, (jwt_payload, done) => {
User.getUserById(jwt_payload.data._id, (err, user) => {
if(err){
return done(err, false);
}
if(user){
return done(null, user);
}else{
return done(null, false);
}
});
})
);
}
非常感谢。.>
我正在为MEANAUTH应用程序工作，当我尝试登录并访问用户配置文件https：// localhost：3000 / prifilei时无法加载...，我想使用angular jwt访问用户配置文件...
回答如下：因为登录或注册时会得到jwt令牌作为响应，将其存储到localstorage中，并且当您在那时对用户配置文件进行api调用时，从localstorage中获取该jwt令牌并附加标题。我希望它可以工作给你。