1.0.4 • Published 7 years ago
angular2-auth2-ktm v1.0.4
凯泰铭科技(北京)有限公司
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);
});
}