调用权限登录接口

前言

最近图书馆的项目要调用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认证,一定要在后端进行配置,否则会出现跨域问题哦。


小结

在两个项目之间进行调用的时候,一定要进行跨域处理,否则是行不通的哦。

感谢您的阅读~~

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hi-Sunshine

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值