SpringBoot和Vue.js实现的前后端分离的用户权限管理系统

下面我将给你详细讲解实现“SpringBoot和Vue.js实现的前后端分离的用户权限管理系统”的完整攻略。

概述

要实现前后端分离的用户权限管理系统，首先需要涉及到的技术栈包括SpringBoot、Vue.js、Spring Security、JWT(token)等，其中Spring Security是前后端分离中实现鉴权的关键技术，JWT是用来生成权限认证的Token，Vue.js是负责前端显示的框架。

具体实现

下面是我认为实现前后端分离的用户权限管理系统的步骤：

搭建后台服务

在后台服务中，我们需要引入Spring Security和JWT相关的包（如spring-boot-starter-security、jjwt等），同时，我们也需要定义好用户、角色和权限等实体，并利用JPA实现对应的数据访问层接口。例如：

@Entity
@Table(name = "sys_role")
public class SysRole {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    private String name;

    private String desc;

    @ManyToMany(fetch = FetchType.EAGER)
    @JoinTable(name = "sys_role_permission", joinColumns = @JoinColumn(name = "role_id"), inverseJoinColumns = @JoinColumn(name = "permission_id"))
    private List<SysPermission> permissions;

    //省略其他字段

    //省略getter和setter

}

实现鉴权功能

利用Spring Security实现鉴权功能，需要实现WebSecurityConfigurerAdapter抽象类。将其加入到SpringBoot的配置文件中，实现如下：

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private CustomUserDetailsService userDetailsService;

    @Autowired
    private CustomPasswordEncoder passwordEncoder;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .antMatchers("/").permitAll()
                .antMatchers("/hello").permitAll()
                .anyRequest().authenticated()
                .and().addFilter(new JWTAuthenticationFilter(authenticationManager()))
                .addFilter(new JWTAuthorizationFilter(authenticationManager()))
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and().csrf().disable();
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder);
    }

    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/js/**", "/css/**", "/images/**");
    }

}

其中，CustomUserDetailsService是我们自定义的获取用户数据的服务，CustomPasswordEncoder是我们自定义实现的PasswordEncoder。此外，还要自定义JWTAuthenticationFilter和JWTAuthorizationFilter，用于进行Jwt鉴权。具体代码实现可以参考Github上spring-security-jwt源码。

实现前端页面

利用Vue.js框架实现我们的前端页面，代码结构如下：

// 登录页面
<template>
  <div>
    <el-input placeholder="请输入用户名" v-model.trim="loginForm.username" />
    <el-input placeholder="请输入密码" v-model.trim="loginForm.password" />
    <el-button @click="login">登录</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      // 向后端发起登录请求
      this.$http.post("/login", this.loginForm).then(response => {
        if (response.data.code === 0) {
          // 登录成功
          localStorage.setItem(
            "Authorization",
            "Bearer " + response.data.data.token
          );
          this.$router.push("/home");
        } else {
          // 登录失败
        }
      });
    }
  }
};
</script>

// home页面
<template>
  <div>
    <h1>这是home页面</h1>
    <el-button @click="logout">退出登录</el-button>
    <el-button v-if="authList.indexOf('user:update') > -1">修改账号信息</el-button>
    <el-button v-if="authList.indexOf('user:delete') > -1">删除账号</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      authList: []
    };
  },
  mounted() {
    // 获取当前用户的权限列表
    this.$http.get("/user/auth").then(response => {
      if (response.data.code === 0) {
        this.authList = response.data.data;
      }
    });
  },
  methods: {
    logout() {
      // 退出登录
      localStorage.removeItem("Authorization");
      this.$router.push("/");
    }
  }
};
</script>

其中，登录页面和home页面分别展示了如何向后端发送请求和如何获取当前用户的权限列表。

实现前后端交互

前端Vue.js框架和后台SpringBoot框架之间的交互，可以通过RESTful接口进行通信。例如：

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/auth")
    public Result<List<String>> getCurrentUserAuth() {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        List<String> authList = new ArrayList<>();
        for (GrantedAuthority authority : authentication.getAuthorities()) {
            authList.add(authority.getAuthority());
        }
        return Result.success(authList);
    }

}

以上示例代码展示了UserController的实现，其中定义了一个获取当前用户权限列表的接口。在前端Vue.js中，可以通过发送GET请求获得该接口返回的数据，并用于页面渲染。

示例说明：

为了展示如何利用JWT实现权限认证，接下来将对JWT的使用进行进一步说明。

Token的生成流程如下：

用户输入用户名、密码，然后向后端发送post请求。
后端服务验证用户名、密码，并生成Token，Token中需要包含用户证书和有效期等信息。
后端服务输出Token到前端。
前端保存Token。
每次请求，前端在请求头中带上Token。
后端验证请求头中的Token信息，并判断Token是否有效。

在JWT的实现中，核心代码如下：

String token = Jwts.builder()
            .setSubject(username)
            .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME))
            .signWith(SignatureAlgorithm.HS512, SECRET.getBytes())
            .compact();

其中，username是用户的用户名，EXPIRATION_TIME是token的有效时间，SECRET是加密的密钥。每次前端向后端发送请求时，会在请求头中加入Authorization信息，例如：

Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTYyMDU2NjgwMH0.2ht-HkQPt2c4QrN4E2HxFae0hZzeKOcOY9RtcVJ2wq2JDJcIRr9l7D7D9Rd7T6lant3IdJrUV6a0H5ED7Kj-g

以上就是实现“SpringBoot和Vue.js实现的前后端分离的用户权限管理系统”的完整攻略，其中包含了后台服务的搭建、鉴权的实现、前端页面的实现和前后端交互的实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot和Vue.js实现的前后端分离的用户权限管理系统 - Python技术站