凯泰铭科技（北京）有限公司

angular2前端登录js

项目地址：https://www.npmjs.com/package/angular2-auth2-ktm

1、安装angular2-auth2-ktm

npm install --save angular2-auth2-ktm

2、使用：

route登陆验证集成：

在app.module中导入：

import { $AuthGuard } from "angular2-auth2-ktm/angular2-auth2-guard"

$AuthGuard服务配置成全局服务

在route配置文件中导入：

import { $AuthGuard } from "angular2-auth2-ktm/angular2-auth2-guard";

route配置中配置canActivate为***$AuthGuard***

初始化

在app.module.ts中的构造方法中配置如下：

constructor(private http : Http, private url:Url) {
	let uri = this.url.getBackendApiUrl("/oauth/config/get/anon");
	let config = {cookieKeyPrefix:'ruleplatform_', oauthConfigUri:uri}
	let $auth = $Auth.getInstance(config, this.http);	
}

oauthConfigUri：从后台获取登录信息配置的uri

cookieKeyPrefix: 保存到cookie中值的前缀

集成登录

写一个login.component.ts（推荐这样命名)

注意:login.component.ts的登录地址与后台返回的登录地址要一致

login.component.ts集成如下代码:

	this.route.params.forEach((params: Params) => {
		this.error = this.route.snapshot.queryParams['error'];
        this.code = this.route.snapshot.queryParams['code']; //后台返回的code
    });
	
	if (!is.empty(this.code)) {
		let token_url:string = this.url.getBackendApiUrl("/authorize/access_token"); // 获取access_token地址
		let user_url:string = this.url.getBackendApiUrl("sys/user/getPersonalInfo"); // 获取用户信息地址
		this.$auth.authenticate(token_url, user_url, this.code).then(res => {
			if (res == 'ok') {
				this.router.navigate(['/list']);
			}
		}).catch(error => {
			console.error("登录失败：" + error);
		});
	}