调用权限登录接口
程序员文章站
2022-05-10 11:04:13
...
前言
最近图书馆的项目要调用itoo的权限接口,需要使用itoo的登录方法,好吧,既然领导给分配了任务,那么就实现呗。下面,具体说一下是如何实现的。
叙述
由于图书馆项目和itoo项目两个项目的前端框架是一样的,都是用的angular,但是两个项目的后端不一样,所以那就把图书馆项目当成是itoo的项目,用图书馆项目的前端去调用提itoo的后端方法。
前端代码
login.component.html
<form ng-submit="login(form)" style="width:auto;margin-top:40px;">
<label style="width:atuo;float:left;margin-bottom:20px;">用户名:</label>
<input [(ngModel)]="user.userCode" name="userCode" id="inputUsername" class="form-control" placeholder="请输入手机号" required="" autofocus="" style="width:70%;margin-bottom:20px;background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
<label for="inputPassword" style="float:left;">密 码:</label>
<input [(ngModel)]="user.password" type="password" name="password" id="inputPassword" class="form-control" placeholder="请输入密码 required="" style="width:70%; background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
</form>
<div>
<button class="btn btn-lg btn-primary btn-block" style="width:45%;margin-left:auto;margin-right:auto;margin-top:30px;background-color:rgb(253, 209, 0);color:black;font-weight:bold;border:0;border-radius:5px 5px 5px 5px;" type="submit" (click)="login()">登录</button>
</div>
login.component.ts
/**-----------------------登录--------------------------------------------------
* @param userCode 用户名
* @param password 密码
*/
login() {
const loginUrl = 'auth-web/access/login';
let userCode = this.user.userCode;
let password = this.user.password;
if (userCode == undefined || userCode == undefined) {
this.msgs = [];
this.msgs = [{
severity: 'error',
summary: '警告',
detail: "亲,用户名和密码不能为空哦"
}]
return;
} else {
const body = JSON.stringify({
userCode: userCode.trim(),
password: password.trim()
});
this.http.post(loginUrl, body).toPromise().then(
res => {
if (res.json().code === '0000') {
console.log(res.json().data);
localStorage.setItem('Authorization', res.json().data.token);
localStorage.setItem('appuserId', res.json().data.id);
localStorage.setItem('userName', res.json().data.userName);
localStorage.setItem('userCode', res.json().data.userCode);
localStorage.setItem('companyId', res.json().data.companyId);
this.router.navigateByUrl("workspace/book");
} else if (res.json().code === '1001') {
this.confirm();
} else if (res.json().code === '1111')
{
this.msgs = [{
severity: 'error',
summary: '提示',
detail: "亲,您的用户名或密码不对!"
}]
return;
}
}
).catch(this.handleError)
}
}
DiaMessage: "";
showDialog(string) {
this.DiaMessage = string;
this.display = true;
}
public handleError(error: any): Promise<any> {
this.showDialog('亲,抱歉登录失败奥');
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
confirm() {
this.confirmationService.confirm({
message: '用户已在线,如果您继续登陆,将强制其他用户下线',
header: '温馨提示',
icon: 'fa fa-question-circle',
accept: () => {
//退出跳转到登录页
const quitURL = 'auth-web/access/logout/' + this.user.userCode;
this.http.get(quitURL).subscribe(
res => {
if (res.json().code == '0000') {
let locat=localStorage.getItem('comName');
localStorage.clear();
localStorage.setItem('comName',locat);
this.login();
}
}
);
},
reject: () => {
this.router.navigate(['/login']);
}
});
}
在前端拦截器的文件中,要设置itoo发布好的路径,如下:
//根据不同的生产环境配置http前缀
if (typeof url == "string") {
let str = url.substring(0, url.indexOf("/"));
switch (str) {
case "auth-web":
url = url.replace("auth-web", "http://192.168.22.53:8085/auth-web"); //itoo的登录访问路径前缀
break;
default:
url = "http://localhost:8091/library/resources/" + url;
break;
}
} else {
let str = url.url.substring(0, url.url.indexOf("/"));
switch (str) {
case "auth-web":
url.url = url.url.replace("auth-web", "http://192.168.22.53:8085/auth-web");
break;
default:
url.url = "http://localhost:8091/library/resources/" + url.url;
// url.url="http://dmsdbj.com/library-test/resources/"+url.url;
break;
}
}
return this.intercept(super.request(url, options));
后端配置
由于是两个项目之间的通信,所以需要在后端项目的配置文件web.xml中进行过滤器操作,实现跨域处理
<!--过滤器操作,实现跨域处理-start-->
<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Authorization,Accept, Origin,X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
注意对Authorization的引用,Http需要请求Authorization认证,一定要在后端进行配置,否则会出现跨域问题哦。
小结
在两个项目之间进行调用的时候,一定要进行跨域处理,否则是行不通的哦。
感谢您的阅读~~
上一篇: 角色权限新增
下一篇: 查看用户所拥有的权限