我正在使用此博客中的代码为我的 Angular 应用程序制作身份验证模块。
我有一个测试页面,其中包括一个登录表单、一个提交按钮和一个“配置文件”按钮,用于查询受限路线。
<div class="container-fluid" ng-controller="AuthCtrl as auth">
<input type="text" ng-model="auth.user.username">
<input type="text" ng-model="auth.user.password">
<button ng-click="auth.login(auth.user)">LOGIN</button>
<button ng-click="auth.profile()">PROFILE</button>
</div>
我登录后查询的受限路由定义为:
const authenticate = expressJwt({
secret: SECRET
});
app.get('/me', authenticate, function(req, res) {
res.status(200).json(req.user);
});
登录工作正常。我收到一个放入 sessionStorage 的令牌。当我单击个人资料按钮(向 /me 请求)时,我收到一个未经授权的错误。
如果我刷新页面并再次单击配置文件,我会得到预期的行为。(/me 返回用户数据没有错误)
如果我之后手动删除令牌,我仍然可以访问 /me,直到我刷新页面。
这是我的服务:
function loginService($http) {
this.login = function(user) {
return $http.post('/auth', user).then(
function(response) {
return response.data;
},
function(response) {
return response;
});
};
this.profile = function() {
return $http.get('/me').then(
function(response) {
return response.data;
},
function(response) {
return response;
});
};
}
angular
.module('app')
.service('loginService', loginService);
这是我使用 httpProvider 的控制器:
function AuthCtrl($window, $http, loginService) {
this.user = {username: "", password: ""};
this.login = function(user) {
loginService.login(user).then(function(data) {
$window.sessionStorage.token = data.token;
});
};
this.profile = function() {
loginService.profile().then(function(data) {
console.log(data);
});
};
}
function config($httpProvider, $windowProvider) {
var window = $windowProvider.$get();
if(window.sessionStorage.token) {
var token = window.sessionStorage.token;
$httpProvider.defaults.headers.common.Authorization = 'Bearer ' + token;
}
};
angular
.module('app')
.config(config)
.controller('AuthCtrl', AuthCtrl);
问题可能来自将令牌存储在 sessionStorage 中还是来自 http 提供程序?
最终,我将实施安全 cookie 方法,但我想在进一步处理之前解决这个问题。