我为nodejs下载了universal-starter,并开始从old angular-rc4迁移我的网站。但是当我必须实现身份验证时(在我的情况下它是存储在localStorage中的JWT),服务器没有localStorage和cookie,因此仅在客户端上呈现angular。
我遵循本指南:https://github.com/angular/universal-starter/issues/148但它没有用。
以下是我的代码:
authentication.services.ts
import { OpaqueToken } from '@angular/core';
export let AUTH_SERVICES = new OpaqueToken('auth.services');
export interface AuthenticationService {
forgotPassword(email: any);
isAuthenticated();
getCurrentUser();
refreshToken();
signin(user : any);
signout();
signup(user : any);
}
server.authentication.ts
import { Injectable } from '@angular/core';
import { AuthenticationService } from './authentication.services';
@Injectable()
export class ServerAuthenticationService implements AuthenticationService {
forgotPassword(email: any) {
throw new Error('Forgot password cannot be called while doing server side rendering');
}
isAuthenticated() {
return false;
}
getCurrentUser(){
if(this.isAuthenticated()) {
return {};
}
return {};
}
refreshToken() {
}
signin(user : any) {
throw new Error('Login cannot be called while doing server side rendering');
}
signout() {
throw new Error('Logout cannot be called while doing server side rendering');
}
signup(user : any) {
throw new Error('Sign up cannot be called while doing server side rendering');
}
}
clientAuthentication.services.ts
@Injectable()
export class UserService implements AuthenticationService {
forgotPassword(email: any){
// client implementation
}
isAuthenticated() {
// client implementation
}
getCurrentUser() {
// client implementation
}
refreshToken() {
// client implementation
}
signin(user : any){
// client implementation
}
signout(){
// client implementation
}
signup(user : any) {
// client implementation
}
}
app.browser.module.ts
@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [
UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
FormsModule,
SharedModule,
HomeModule,
AboutModule,
NavbarModule,
AppRoutingModule
],
providers: [
{ provide: 'isBrowser', useValue: isBrowser },
{ provide: 'isNode', useValue: isNode },
{ provide: 'LRU', useFactory: getLRU, deps: [] },
{ provide: AUTH_SERVICES, useFactory: UserService},
CacheService
]
})
app.node.module.ts
@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [
UniversalModule, // NodeModule, NodeHttpModule, and NodeJsonpModule are included
FormsModule,
SharedModule,
HomeModule,
AboutModule,
NavbarModule,
AppRoutingModule
],
providers: [
{ provide: 'isBrowser', useValue: isBrowser },
{ provide: 'isNode', useValue: isNode },
{
provide: 'LRU',
useFactory: getLRU,
deps: [
[new Inject('LRU'), new Optional(), new SkipSelf()]
]
},
{ provide: AUTH_SERVICES, useFactory: ServerAuthenticationService },
CacheService
]
})
那么如何通过路由器转换在服务器上导航到该页面时通过浏览器刷新在服务器上导出相同的页面输出?
提前致谢
答案 0 :(得分:1)
在节点中,您可以在快速应用程序中使用请求和响应属性,并将它们注入基于浏览器模块上的服务器的角度应用程序中。 request.cookies包含一个对象,用于将KVPS映射到您的Cookie。
对于一些(过时的)示例,请查看此处和此处: https://github.com/angular/universal-starter/blob/master/src/node.module.ts#L43 https://github.com/angular/universal-starter/blob/master/src/browser.module.ts#L52
代码很快就会过时,但原则仍然存在。使用依赖注入将请求注入应用程序中的服务器,并将请求的某些存根(可能仍然显示浏览器cookie)注入浏览器的版本。