回文集目录:JHipster一知半解
shared.module.ts
SharedModule整合了Lib模块，Common模块两个子模块的内容，并且重新导出，作为整个的共享模块（工具模块）使用。
@NgModule({
//引入两个子模块
imports: [
JhipsterSampleApplicationNg2SharedLibsModule,
JhipsterSampleApplicationNg2SharedCommonModule
],
//声明自己的组件，指令
declarations: [
JhiLoginModalComponent,
HasAnyAuthorityDirective
],
//声明通用的服务，主要，由于不是在主模块provider了，只有引入SharedModule的才能使用这些
//实际上，其他所有的子模块都有引入SharedLibsModule。
providers: [
LoginService,
LoginModalService,
AccountService,
StateStorageService,
Principal,
CSRFService,
AuthServerProvider,
UserService,
DatePipe
],
//模块的入口组件--SharedModule并不会被路由懒加载到，所有声明并没有意义
entryComponents: [JhiLoginModalComponent],
exports: [
JhipsterSampleApplicationNg2SharedCommonModule,
JhiLoginModalComponent,
HasAnyAuthorityDirective,
DatePipe
],
//语言模式，CUSTOM_ELEMENTS_SCHEMA是angular提供的一种模式，允许在命名时使用“-”。
/* Defines a schema that will allow:
* - any non-Angular elements with a `-` in their name,
* - any properties on elements with a `-` in their name which is the common rule for custom elements.
*/
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class JhipsterSampleApplicationNg2SharedModule {}
shared-libs.module.ts
@NgModule({
imports: [
NgbModule.forRoot(),
NgJhipsterModule.forRoot({
// set below to true to make alerts look like toast
alertAsToast: false,
i18nEnabled: true,
defaultI18nLang: 'en'
}),
InfiniteScrollModule,
CookieModule.forRoot()
],
exports: [
FormsModule,
HttpModule,
CommonModule,
NgbModule,
NgJhipsterModule,
InfiniteScrollModule
]
})
export class JhipsterSampleApplicationNg2SharedLibsModule {}
SharedLibsModule比较简单，引用了NgbModule，NgJhipsterModule，InfiniteScrollModule，CookieModule，并且初始化了它们，重新导出了它们。
值得主要的是，这里是初始化ng-jhipster的地方，参见
TODO：链接ng-jhipster源码1-顶层
shared-common.module.ts
定义了内部（JHipster）实现的语言帮助（显示Title），警告组件两个部分，
奇怪的是，有的组件是放Shared顶层的，有的又放到Common里面，是因为语言帮助和警告框更有通用性吧
alert目录
JhiAlertErrorComponent和JhiAlertComponent两个组件的外观（template）是一直的，但是内部逻辑有所区别。JhiAlertComponent就完全依赖alertService，使用服务进行显示提示框。
则在JhiAlertErrorComponent在自己内部保存alert数组（也依赖alertService构造），并且通过cleanHttpErrorListener注册监听httpError的错误，通过异步的方式在compont里面进行通讯错误的提示。
auth目录
account.service.ts
@Injectable()
export class AccountService {
//这里注入的http是Jhipster修改过的。
constructor(private http: Http) { }
//调用Restful接口获取用户数据，返回一个any型，比较宽松
get(): Observable<any> {
return this.http.get(SERVER_API_URL + 'api/account').map((res: Response) => res.json());
}
//调用Restful保存获取用户数据
save(account: any): Observable<Response> {
return this.http.post(SERVER_API_URL + 'api/account', account);
}
}
auth-jwt.service.ts
在Shared内部使用的登录辅助类，JWT认证方式时候的通讯类。
//传入凭证信息，进行登录认证通讯
login(credentials): Observable<any> {
//post内容，用户名，密码，是否记住
const data = {
username: credentials.username,
password: credentials.password,
rememberMe: credentials.rememberMe
};
//这里调用api/authenticate认证，
return this.http.post(SERVER_API_URL + 'api/authenticate', data).map(authenticateSuccess.bind(this));
function authenticateSuccess(resp) {
//登录成功从返回报文头获取Authorization，并且使用魔数“Bearer ”分隔。
const bearerToken = resp.headers.get('Authorization');
if (bearerToken && bearerToken.slice(0, 7) === 'Bearer ') {
const jwt = bearerToken.slice(7, bearerToken.length);
this.storeAuthenticationToken(jwt, credentials.rememberMe);
return jwt;
}
}
}
//另外一种登录方式，仅保存的jwt信息，无需特别通讯（在每次通讯的报文头都会带上jwt的token信息）
loginWithToken(jwt, rememberMe) {
if (jwt) {
this.storeAuthenticationToken(jwt, rememberMe);
return Promise.resolve(jwt);
} else {
return Promise.reject('auth-jwt-service Promise reject'); // Put appropriate error message here
}
}
//根据rememberMe的值，决定是保存到$localStorage还是$sessionStorage
storeAuthenticationToken(jwt, rememberMe) {
if (rememberMe) {
this.$localStorage.store('authenticationToken', jwt);
} else {
this.$sessionStorage.store('authenticationToken', jwt);
}
}
//无http操作，仅清空本地存储的token即可
logout(): Observable<any> {
return new Observable((observer) => {
this.$localStorage.clear('authenticationToken');
this.$sessionStorage.clear('authenticationToken');
observer.complete();
});
}
其中$localStorage和$sessionStorage是由ngx-webstorage（之前是ng2-webstorage）提供的浏览器端存储服务，顾名思义可知，API调用方法相同，存储的位置，有效期不同。
csrf.service.ts
从cookie中获取XSRF-TOKEN的值。
has-any-authority.directive.ts
通过判断权限列表，决定页面某个标签是否显示。通过注入principal进行判断。其判断有点类似ngif的指令，根据输入的值，调用viewContainerRef重新绘制页面。
P.S Jhipster的权限控制，大都是Hard code近代码的，比较简单，动态性小。
principal.service.ts
核心的服务，保存用户的认证信息，用户名，是否认证，认证状态主题（Subject），核心代码为几个用户权限的判断hasAnyAuthority（hasAnyAuthority，hasAnyAuthorityDirect，hasAuthority），以及用户状态的判断isAuthenticated。
state-storage.service.ts
constructor(
private $sessionStorage: SessionStorageService
) {}
在构造器中注入$sessionStorage，用来在URL跳转中能记录状态。主要包括previousState，destinationState，previousUrl三种信息。其中previousState包含name和params两个内容。
storePreviousState(previousStateName, previousStateParams) {
const previousState = { 'name': previousStateName, 'params': previousStateParams };
this.$sessionStorage.store('previousState', previousState);
}
destinationState包含目标状态destinationState，目标参数destinationStateParams，目标来源fromState三个内容
storeDestinationState(destinationState, destinationStateParams, fromState) {
const destinationInfo = {
'destination': {
'name': destinationState.name,
'data': destinationState.data,
},
'params': destinationStateParams,
'from': {
'name': fromState.name,
}
};
this.$sessionStorage.store('destinationState', destinationInfo);
}
user-route-access-service.ts
它是一个路由守卫CanActivate，用来控制能否进行url跳转，进入某个页面，核心方法为canActivate，调用checkLogin进行验证
checkLogin(authorities: string[], url: string): Promise<boolean> {
const principal = this.principal;
//返回一个Promise对象
return Promise.resolve(principal.identity().then((account) => {
//判断要求的权限列表，为空直接放行
if (!authorities || authorities.length === 0) {
return true;
}
//如果登录情况，调用principal是否具有权限
if (account) {
return principal.hasAnyAuthority(authorities).then(
(response) => {
if (response) {
return true;
}
return false;
}
);
}
//登记当前url，调用stateStorageService存储当前url，并且通过loginModalService显示登录框给用户登录。
this.stateStorageService.storeUrl(url);
this.router.navigate(['accessdenied']).then(() => {
// only show the login dialog, if the user hasn't logged in yet
if (!account) {
this.loginModalService.open();
}
});
return false;
}));
}
网友评论