调用权限登录接口

前言

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

---

小结

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

感谢您的阅读~~