Angular前端调用Spring Boot后端OAuth2登录index.html的实现方法咨询

• 后端用了@RestController注解，会把所有返回值当做字符串/JSON序列化返回，你写的return "/resources/static/index.html"只会给前端返回这个路径字符串，不会返回实际的HTML页面内容
• 前端用HTTP请求拉取HTML直接渲染的方式会导致页面里的静态资源（css、js）路径失效，而且OAuth2的跳转逻辑会被Angular的路由拦截，无法正常完成登录流程

方案1：直接跳转后端登录页（推荐，适配OAuth2流程） #

OAuth2三方登录本身需要跨站跳转，内嵌页面会触发浏览器安全限制，直接跳转是成本最低的实现方式：

第一步：修改后端Controller配置 #

把负责返回登录页的Controller注解换成@Controller，走Spring Boot的视图解析逻辑，直接返回静态页面：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class LoginPageController {
    // 映射/login路径到static目录下的index.html登录页
    @GetMapping("/login")
    public String loginPage() {
        return "index.html";
    }
}

第二步：修改Angular前端代码 #

不需要发送HTTP请求拉取页面，点击按钮直接跳转后端登录路径即可：

login.component.html

把原生onClick替换为Angular的click事件绑定：

<div>
  <button (click)="goToLoginPage()" class="btn btn-primary">Login</button>
</div>
<div>
  <button (click)="logout()" class="btn btn-primary">Logout</button>
</div>

login.component.ts

删除原有拉取HTML的逻辑，直接调用浏览器跳转：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  // 替换为你实际的Spring Boot服务登录地址，比如http://localhost:8080/login
  private readonly backendLoginUrl = '你的Spring Boot服务地址/login';
  private readonly backendLogoutUrl = '你的Spring Boot服务地址/logout';

  constructor() {
  }

  ngOnInit() {
    // 如果需要进入登录组件就自动跳转可以打开下方注释，不需要就删除
    // this.goToLoginPage();
  }

  public goToLoginPage(): void {
    // 当前窗口跳转到后端登录页
    window.location.href = this.backendLoginUrl;
    // 如果需要新开窗口跳转可以替换为下面的代码
    // window.open(this.backendLoginUrl, '_blank');
  }

  public logout(): void {
    window.location.href = this.backendLogoutUrl;
  }
}

这个方案不需要用到LoginService，直接删除即可，减少多余请求。

方案2：内嵌登录页到Angular页面（不推荐，有OAuth2兼容问题） #

如果一定要把登录页嵌在Angular页面内不做整页跳转，可以用iframe实现：

login.component.html #

<div>
  <button (click)="showLoginIframe = true" class="btn btn-primary">Login</button>
</div>
<div>
  <button (click)="logout()" class="btn btn-primary">Logout</button>
</div>
<!-- 登录内嵌区域 -->
<div *ngIf="showLoginIframe" class="login-iframe-container">
  <iframe [src]="backendLoginUrlSafe" width="100%" height="500px" frameborder="0"></iframe>
  <button (click)="showLoginIframe = false">关闭登录框</button>
</div>

login.component.ts #

需要注入Angular的安全校验服务，放行iframe的资源地址：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  showLoginIframe = false;
  backendLoginUrlSafe: SafeResourceUrl;
  private readonly backendLogoutUrl = '你的Spring Boot服务地址/logout';

  constructor(private sanitizer: DomSanitizer) {
    const backendLoginUrl = '你的Spring Boot服务地址/login';
    this.backendLoginUrlSafe = this.sanitizer.bypassSecurityTrustResourceUrl(backendLoginUrl);
  }

  ngOnInit() {}

  public logout(): void {
    window.location.href = this.backendLogoutUrl;
  }
}

注意：如果三方登录平台设置了X-Frame-Options禁止iframe嵌套，这个方案会加载失败，优先使用方案1

内容的提问来源于stack exchange，提问作者Ryan