Angular.Js + Spring Security 的权限控制使用

一. 引言

在系统中，常常因为用户的角色不同，拥有不同的功能，那么涉及到一个问题，就是UI界面如何根据用户角色的不太显示不同的UI界面，后台如何避免没有权限的用户进行api 接口的访问。

二. Angular.JS 权限的指令

Angular.Js中指令分为属性型指令和结构型指令。
1.指令得基本使用方法
angular 创建指令的命令：

ng generate directive [directive-name]

属性型指令：主要用于操作元素的属性和样式。angular中提供的内置结构型指令有ngStyle、ngClass等。
eg:

<div [ngClass]="{'red-background': isRed}">这是V层的使用</div>

在angular的c层中，根据isRed 属性的值true 还是 false 来决定V层是否添加该样式。

结构型指令：主要用于改变DOM的结构和布局。angular中提供的内置结构型指令有ngIf、ngFor、ngSwitch等。 在V层使用的时候，需要在指令名前加前缀 , 这是angular的语法糖，编译器会将起转换为[] 包裹的属性型形式。
eg:

<div *ngIf="condition">V层使用结构型指令ngIf</div>

编译器看见前缀* 后，将起转换为：

<ng-template [ngIf]="condition">  
  <div>这是编译器转换后的形式</div>  
</ng-template>

在angular的c层中，根据condition属性的值true 还是 false 来决定V层是否改变DOM的结构和布局。

若您还需了解更多指令selector的设置，可移步到Angular 指令注解的属性解释

2.用angular结构型指令实现前台权限的控制。
需求：不同用户登录系统，展示不同的菜单，或添加，编辑，删除等操作按钮。
思路：

1 创建权限指令
2 在指令中获取当前登录用户
3 在指令中做逻辑判断，用户拥有权限 创建嵌入视图, 用户没有权限 什么都不做或清除嵌入的视图
4 在v层中元素中，使用该指令

具体实现：
V成使用：

<div *appBePermit="['admin']">holle</div>

指令：

@Directive({
  selector: '[appBePermit]'
})
export class BePermitDirective implements OnInit{
  // 模拟一个当前登录用户
  user = {name: '张三', password: '123456', authorities: ['admin', 'user']} as User;

  // 接收属性值
  @Input('appBePermit') authorities: string[] | undefined | string;

  constructor(private viewContainer: ViewContainerRef,
              private readonly templateRef: TemplateRef<any>,) {
  }

  ngOnInit() {
    console.log(this.authorities)
    // 获取当前用户
    const currentUser = this.user;

    // 逻辑判断
    const hasView = this.viewContainer.length;
    if (hasView === 0 && currentUser.authorities.some(item => this.authorities?.includes(item))) {
      // 有权限 创建陷入视图
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      // 清除容器的视图
      this.viewContainer.clear();
    }
  }
}
interface User {
  name: string,
  password: string,
  authorities: string[]
}

其中：TemplateRef用于表示内嵌的<ng-template>模板元素。

二. 基于Spring Security 的授权使用

spring Security 是一个框架，提供 认证（authentication）、授权（authorization） 和 保护，以抵御常见的攻击。
在 Spring Security 中，与认证、授权相关的校验其实都是利用一系列的过滤器来完成的，这些过滤器共同组成了一个过滤器链。

1 项目启用spring security
添加依赖

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

在配置类中，添加注解使其生效
@EnableWebSecurity （启用Spring Security的Web安全配置）
@EnableGlobalMethodSecurity(prePostEnabled = true) （启用Spring Security的@PreAuthorize、@PostAuthorize、@PreFilter和@PostFilter注解）
继承WebSecurityConfigurerAdapter适配器类，自定义安全策略
eg:

  
@Configuration  
@EnableWebSecurity  
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {  
  
        protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .antMatchers("/login").permitAll()
            .anyRequest().authenticated()
            .and()
            .httpBasic()
            .and().cors()
            .and().csrf().disable();
    }
    
}

执行以上的操作后，Sping Security 就可以在系统中使用了。
在每个方法前面，注解使用@PreAuthorize("hasAnyAuthority('access', 'ROLE_ADMIN')")可控制拥有access, ROLE_ADMIN中任意一个权限即可访问该方法。

用户角色的存储

总结

Spring Security 未使用过，仅仅处于看到过的阶段，需要写Demo 进行学习一下，当前学习的都很浅，还需要深入学习一下，画图理解一下其原理。