Node.js Angular 2/.NET core-授权内容预呈现
我正在尝试在Angular 2和.net core上实现身份验证/授权,这是由以下内容开始的: 我的auth token jwt存储选项是什么?这样就可以访问它了 来自客户端:登录时写入,需要续订令牌时写入,发出get/post请求时读取 从服务器:在节点预呈现应用程序相同请求时读取,但从节点上下文读取 我知道预先呈现受保护的内容没有多大意义,因为它无论如何都不会被索引,但这又带来了闪烁的问题。由于节点无法在我的场景中访问此令牌,服务器将在内容需要授权的情况下返回内容较少的html 当前我将令牌存储在浏览器的本地存储中:Node.js Angular 2/.NET core-授权内容预呈现,node.js,angular,asp.net-core,Node.js,Angular,Asp.net Core,我正在尝试在Angular 2和.net core上实现身份验证/授权,这是由以下内容开始的: 我的auth token jwt存储选项是什么?这样就可以访问它了 来自客户端:登录时写入,需要续订令牌时写入,发出get/post请求时读取 从服务器:在节点预呈现应用程序相同请求时读取,但从节点上下文读取 我知道预先呈现受保护的内容没有多大意义,因为它无论如何都不会被索引,但这又带来了闪烁的问题。由于节点无法在我的场景中访问此令牌,服务器将在内容需要授权的情况下返回内容较少的html 当前我将令牌
localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
。。。显然节点没有这样的东西,无法访问它
简单获取请求:
let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });
let options = new RequestOptions({ headers: headers });
this.http.get(url, options).subscribe(response => callback(<any>response));
我很早就学习/采用了这一点——我也会考虑任何其他的AUTH方法,但是它必须遵守规则才能授权的内容。
< P>我可以用Cookie作为令牌存储来解决这个问题,然后将cookie的令牌传递给ASP预处理模块。 客户端和服务器的存储服务:declare var tokenStorage: NodeTokenStorage;
@Injectable()
export class TokenStorageService implements NodeTokenStorage {
getItem(key: string): string {
if (!isBrowser) {
return tokenStorage.getItem(key);
}
else {
return getCookie(key);
}
}
setItem(key: string, value: string): void {
if (!isBrowser) {
tokenStorage.setItem(key, value);
}
else {
setCookie(key, value, 1);
}
}
removeItem(key: string): void {
if (!isBrowser) {
tokenStorage.removeItem(key);
}
else {
removeCookie(key);
}
}
}
interface NodeTokenStorage {
getItem(key: string): string;
setItem(key: string, value: string): void;
removeItem(key: string): void;
}
将cookie注入预渲染模块:
<app
asp-prerender-module="ClientApp/dist/main-server"
asp-prerender-data='new { token = Context.Request.Cookies["token"] }'>
Loading...
</app>
按以下方式阅读ClientApp/boot-server.ts:
(global as any).tokenStorage = {
getItem: function(key) {
return this[key];
},
setItem: function (key, value) {
this[key] = value;
},
removeItem: function(key) {
this[key] = undefined;
}
}
export default createServerRenderer(params => {
(global as any).tokenStorage.setItem('token', params.data.token);
return new Promise<RenderResult>((resolve, reject) => {
const requestZone = Zone.current.fork({
name: 'angular-universal request',
properties: {
baseUrl: '/',
requestUrl: params.url,
originUrl: params.origin,
preboot: false,
document: '<app></app>'
},
onHandleError: (parentZone, currentZone, targetZone, error) => {
// If any error occurs while rendering the module, reject the whole operation
reject(error);
return true;
}
});
return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => {
resolve({ html: html });
}, reject);
});
});
然后-当应用程序在服务器端的路由和redux存储设置之前启动时:我将读取令牌以获取经过身份验证的用户所需的数据。通过这种方式,从服务器返回完整的html,包括所有身份验证内容和用户特定的数据
参考文献: