[英]Angular 2/.NET core - authorized content prerendering
我正在尝试在Angular 2和.net核心上实现身份验证/授权(已通过以下方式启动: https : //github.com/aspnet/JavaScriptServices )
我的身份验证令牌(jwt)的存储选项是什么-因此可以访问?
我知道预渲染受保护的内容没有太多意义-因为无论如何都不会对其进行索引-但这又使闪烁的问题再次出现。 由于节点无法访问此令牌(在我的情况下)-服务器返回无内容的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));
我真的很早就开始学习/采用此方法-我还会考虑其他身份验证方法,但是它必须符合规则才能呈现授权内容。
我可以通过使用cookie作为令牌存储来解决此问题,然后将令牌从cookie传递给asp-prerender-module。
客户端和服务器的存储服务:
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注入到prerender模块中:
<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从服务器返回,包括所有身份验证内容和特定于用户的数据。
裁判: https : //github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#server-side-prerendering
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.