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

秒速五厘米 2024-03-25 10:08 25阅读 0赞

##### 后端实现 #####

##### 1. 数据库设计 #####

我们需要设计两个表：用户表和角色表。

用户表  
字段 类型 描述  
id bigint(20) 用户 ID  
username varchar(50) 用户名  
password varchar(255) 密码  
email varchar(50) 邮箱  
phone varchar(20) 手机号码  
create\_by varchar(50) 创建人  
create\_time datetime 创建时间  
update\_by varchar(50) 最后修改人  
update\_time datetime 最后修改时间  
status tinyint(1) 用户状态

角色表  
字段 类型 描述  
id bigint(20) 角色 ID  
role\_name varchar(50) 角色名称  
create\_by varchar(50) 创建人  
create\_time datetime 创建时间  
update\_by varchar(50) 最后修改人  
update\_time datetime 最后修改时间  
status tinyint(1) 角色状态

用户角色表  
字段 类型 描述  
id bigint(20) ID  
user\_id bigint(20) 用户 ID  
role\_id bigint(20) 角色 ID  
create\_by varchar(50) 创建人  
create\_time datetime 创建时间  
update\_by varchar(50) 最后修改人  
update\_time datetime 最后修改时间  
status tinyint(1) 状态

##### 2. 创建 Maven 项目 #####

使用 Maven 创建 Spring Boot 项目，引入 Spring Boot Web、Spring Boot JPA、MySQL 和 Lombok 等依赖。可以使用以下命令创建 Maven 项目：

mvn archetype:generate -DgroupId=com.example -DartifactId=user-management -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

##### 3. 配置数据库 #####

在 application.properties 文件中添加以下配置：

spring.datasource.url=jdbc:mysql://localhost:3306/user_management?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    spring.datasource.username=root
    spring.datasource.password=root
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    
    spring.jpa.hibernate.ddl-auto=update
    spring.jpa.properties.hibernate.show_sql=true
    spring.jpa.properties.hibernate.format_sql=true
    spring.jpa.properties.hibernate.use_sql_comments=true

##### 4. 创建实体类 #####

创建 User、Role 和 UserRole 实体类，使用 Lombok 注解简化代码。具体代码如下：

User.java

@Data
    @Entity
    @Table(name = "user")
    public class User {
        
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        private Long id
    User.java（续）
    java
    Copy code
        private String username;
        private String password;
        private String email;
        private String phone;
        private String createBy;
        private Date createTime;
        private String updateBy;
        private Date updateTime;
        private Boolean status;
    }

Role.java

@Data
    @Entity
    @Table(name = "role")
    public class Role {
        
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        private Long id;
        private String roleName;
        private String createBy;
        private Date createTime;
        private String updateBy;
        private Date updateTime;
        private Boolean status;
    }

UserRole.java

@Data
    @Entity
    @Table(name = "user_role")
    public class UserRole {
        
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        private Long id;
        private Long userId;
        private Long roleId;
        private String createBy;
        private Date createTime;
        private String updateBy;
        private Date updateTime;
        private Boolean status;
    }

##### 5. 创建 Repository #####

创建 UserRepository、RoleRepository 和 UserRoleRepository，用于操作数据库。

UserRepository.java

@Repository
    public interface UserRepository extends JpaRepository<User, Long> {
        
        User findByUsername(String username);
    }
    RoleRepository.java
    java
    Copy code
    @Repository
    public interface RoleRepository extends JpaRepository<Role, Long> {
        
    }
    UserRoleRepository.java
    java
    Copy code
    @Repository
    public interface UserRoleRepository extends JpaRepository<UserRole, Long> {
        
        List<UserRole> findByUserId(Long userId);
    }

##### 6. 创建 Service #####

创建 UserService、RoleService 和 UserRoleService，用于处理业务逻辑。

UserService.java

@Service
    public class UserService {
        
        @Autowired
        private UserRepository userRepository;
        @Autowired
        private UserRoleRepository userRoleRepository;
    
        public User findByUsername(String username) {
        
            return userRepository.findByUsername(username);
        }
    
        public List<UserRole> findUserRolesByUserId(Long userId) {
        
            return userRoleRepository.findByUserId(userId);
        }
    }

RoleService.java

@Service
    public class RoleService {
        
        @Autowired
        private RoleRepository roleRepository;
    }
    UserRoleService.java
    java
    Copy code
    @Service
    public class UserRoleService {
        
        @Autowired
        private UserRoleRepository userRoleRepository;
    }

##### 7. 创建 Controller #####

创建 UserController、RoleController 和 UserRoleController，用于处理请求。

UserController.java

@RestController
    @RequestMapping("/api/user")
    public class UserController {
        
        @Autowired
        private UserService userService;
    
        @GetMapping("/{username}")
        public User findByUsername(@PathVariable String username) {
        
            return userService.findByUsername(username);
        }
    
        @GetMapping("/{userId}/roles")
        public List<UserRole> findUserRolesByUserId(@PathVariable Long userId) {
        
            return userService.findUserRolesByUserId(userId);
        }
    }

RoleController.java

@RestController
    @RequestMapping("/api/role")
    public class RoleController {
        
        @Autowired
        private RoleService roleService;
    
        @GetMapping("")
        public List<Role> findAll() {
        
            return roleService.findAll();
        }
    }

UserRoleController.java

@RestController
    @RequestMapping("/api/userRole")
    public class UserRoleController {
        
        @Autowired
        private UserRoleService userRoleService;
    }

##### 8. 启动应用 #####

使用 Maven 命令 mvn spring-boot:run 启动应用，或者直接运行 UserManagementApplication 类。

##### 9. 完整的SecurityConfig.java： #####

@Configuration
    @EnableWebSecurity
    public class SecurityConfig extends WebSecurityConfigurerAdapter {
        
    
        @Autowired
        private UserDetailsServiceImpl userDetailsService;
    
        @Autowired
        private JwtAuthenticationEntryPoint unauthorizedHandler;
    
        @Bean
        public JwtAuthenticationFilter jwtAuthenticationFilter() {
        
            return new JwtAuthenticationFilter();
        }
    
        @Override
        public void configure(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {
        
            authenticationManagerBuilder
                    .userDetailsService(userDetailsService)
                    .passwordEncoder(passwordEncoder());
        }
    
        @Bean(BeanIds.AUTHENTICATION_MANAGER)
        @Override
        public AuthenticationManager authenticationManagerBean() throws Exception {
        
            return super.authenticationManagerBean();
        }
    
        @Bean
        public PasswordEncoder passwordEncoder() {
        
            return new BCryptPasswordEncoder();
        }
    
        @Override
        protected void configure(HttpSecurity http) throws Exception {
        
            http
                    .cors()
                        .and()
                    .csrf()
                        .disable()
                    .exceptionHandling()
                        .authenticationEntryPoint(unauthorizedHandler)
                        .and()
                    .sessionManagement()
                        .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                        .and()
                    .authorizeRequests()
                        .antMatchers("/api/auth/**")
                            .permitAll()
                        .anyRequest()
                            .authenticated();
    
            http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
        }
    }

其中，JwtAuthenticationFilter是前面提到的JWT认证过滤器，UserDetailsServiceImpl是实现了Spring Security的UserDetailsService接口的用户服务类，JwtAuthenticationEntryPoint是未经授权时抛出的异常处理程序。配置类中的configure方法配置了授权规则，访问“/api/auth/\*\*”路径下的接口不需要认证即可访问，其他所有请求都需要认证后才能访问。同时，我们也添加了JWT认证过滤器。

##### 前端实现 #####

##### 1. 创建 Vue.js 项目 #####

使用 Vue CLI 创建项目：

vue create user-management

##### 2. 添加依赖 #####

在 package.json 中添加以下依赖：

{
        
      "dependencies": {
        
        "axios": "^0.21.1",
        "element-plus": "^1.0.2-beta.55",
        "vue": "^2.6.12",
        "vue-router": "^3.5.1"
      }
    }

然后执行 npm install 安装依赖。

##### 3. 配置 Axios #####

在 src/main.js 中添加以下代码：

import axios from 'axios'
    
    axios.defaults.baseURL = 'http://localhost:8080/api'
    
    Vue.prototype.$http = axios

##### 4. 创建路由 #####

在 src/router/index.js 中添加以下代码：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    import Login from '../views/Login.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        
        path: '/login',
        name: 'Login',
        component: Login
      }
    ]
    
    const router = new VueRouter({
        
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

##### 5. 创建页面 #####

在 src/views 目录下创建以下页面：

Home.vue

<template>
      <div>
        <h1>用户管理</h1>
        <table>
          <thead>
            <tr>
              <th>用户名</th>
              <th>邮箱</th>
              <th>手机号码</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{
        {
         user.username }}</td>
              <td>{
        {
         user.email }}</td>
              <td>{
        {
         user.phone }}</td>
              <td>
                <button @click="editUser(user)">编辑</button>
                <button @click="deleteUser(user)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'Home',
      data() {
        
        return {
        
          users: []
        }
      },
      mounted() {
        
        this.loadUsers()
      },
      methods: {
        
        loadUsers() {
        
          this.$http.get('/user')
            .then(response => {
        
              this.users = response.data
            })
            .catch(error => {
        
              console.log(error)
            })
        },
        editUser(user) {
        
          console.log(user)
        },
        deleteUser(user) {
        
          console.log(user)
        }
      }
    }
    </script>

<template>
      <div>
        <h1>登录</h1>
        <form @submit.prevent="login">
          <div>
            <label>用户名：</label>
            <input type="text" v-model="username" />
          </div>
          <div>
            <label>密码：</label>
            <input type="password" v-model="password" />
          </div>
          <button type="submit">登录</button>
        </form>
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'Login',
      data() {
        
        return {
        
          username: '',
          password: ''
        }
      },
      methods: {
        
        login() {
        
          const params = {
        
            username: this.username,
            password: this.password
      }
    
      this.$http.post('/login', params)
        .then(response => {
        
          console.log(response)
        })
        .catch(error => {
        
          console.log(error)
        })
    }
    }
    }
    </script>

##### 6. 添加 Element UI 组件 #####

在 `src/main.js` 中添加以下代码：

import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    
    Vue.use(ElementPlus)

##### 7. 运行项目 #####

在项目根目录下执行以下命令运行项目：

npm run serve

然后在浏览器中访问 http://localhost:8080 查看效果。

以上代码只是简单地实现了用户列表的显示以及登录功能的实现，还需要进一步完善和优化。同时，还需要在后端实现相应的接口。

##### 8. 添加路由 #####

在 src/router/index.js 中添加以下代码：

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../views/Login.vue'
    import UserList from '../views/UserList.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        
        path: '/',
        redirect: '/login'
      },
      {
        
        path: '/login',
        name: 'Login',
        component: Login
      },
      {
        
        path: '/userlist',
        name: 'UserList',
        component: UserList,
        meta: {
        
          requireAuth: true
        }
      }
    ]
    
    const router = new VueRouter({
        
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

其中，meta 属性中的 requireAuth 表示该路由需要登录才能访问。

##### 9. 添加登录拦截 #####

在 src/main.js 中添加以下代码：

router.beforeEach((to, from, next) => {
        
      if (to.meta.requireAuth && !localStorage.getItem('token')) {
        
        next({
        
          path: '/login',
          query: {
         redirect: to.fullPath }
        })
      } else {
        
        next()
      }
    })

这段代码的作用是，在用户访问需要登录才能访问的路由时，检查用户是否已登录。如果用户未登录，则跳转到登录页面，并将目标路由的路径保存到查询参数中，以便用户登录成功后自动跳转到目标路由。

##### 10. 添加用户服务 #####

在 src/services 目录下创建 UserService.js 文件，并添加以下代码：

import axios from 'axios'
    
    const API_URL = '/api/users/'
    
    class UserService {
        
      getUsers () {
        
        return axios.get(API_URL)
      }
    
      getUser (id) {
        
        return axios.get(API_URL + id)
      }
    
      createUser (data) {
        
        return axios.post(API_URL, data)
      }
    
      updateUser (id, data) {
        
        return axios.put(API_URL + id, data)
      }
    
      deleteUser (id) {
        
        return axios.delete(API_URL + id)
      }
    }
    export default new UserService()

该文件定义了一个 UserService 类，用于向后端发送请求，获取用户数据。其中，API\_URL 表示后端 API 的根路径，getUsers、getUser、createUser、updateUser 和 deleteUser 方法分别对应获取用户列表、获取单个用户、创建用户、更新用户和删除用户。

##### 11. 添加用户列表页面 #####

在 src/views 目录下创建 UserList.vue 文件，并添加以下代码：

<template>
      <div>
        <h1>用户列表</h1>
        <div class="mb-3">
          <router-link to="/user/add" class="btn btn-primary">添加用户</router-link>
        </div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>用户名</th>
              <th>邮箱</th>
              <th>角色</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in userList" :key="user.id">
              <td>{
        {
         user.username }}</td>
              <td>{
        {
         user.email }}</td>
              <td>{
        {
         user.roles.map(role => role.name).join(', ') }}</td>
              <td>
                <router-link :to="'/user/edit/' + user.id" class="btn btn-primary">编辑</router-link>
                <button class="btn btn-danger" @click="deleteUser(user.id)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
        
      data() {
        
        return {
        
          userList: [],
        };
      },
      methods: {
        
        fetchUserList() {
        
          axios.get("/api/private/users").then((response) => {
        
            this.userList = response.data;
          });
        },
        deleteUser(id) {
        
          if (confirm("确定删除该用户吗？")) {
        
            axios.delete(`/api/private/users/${
        id}`).then(() => {
        
              this.fetchUserList();
            });
          }
        },
      },
      mounted() {
        
        this.fetchUserList();
      },
    };
    </script>

这个文件中，我们使用了vue-router和axios库。在fetchUserList方法中，我们使用axios库发起了一个GET请求来获取用户列表。在deleteUser方法中，我们使用axios库发起了一个DELETE请求来删除用户。

接下来我们将完成系统的权限控制部分。在Spring Security中，权限控制通常通过定义安全配置类来实现。

首先，我们需要创建一个实现了WebSecurityConfigurer接口的安全配置类SecurityConfig。在这个类中，我们可以配置用户认证和授权规则。

@Configuration
    @EnableWebSecurity
    public class SecurityConfig extends WebSecurityConfigurerAdapter {
        
     
        @Autowired
        private UserDetailsService userDetailsService;
     
        @Override
        protected void configure(HttpSecurity http) throws Exception {
        
            http.csrf().disable()
                    .authorizeRequests()
                    .antMatchers("/api/public/**").permitAll()
                    .antMatchers("/api/private/**").authenticated()
                    .and().formLogin()
                    .loginPage("/login")
                    .permitAll()
                    .defaultSuccessUrl("/")
                    .and().logout().logoutUrl("/logout").logoutSuccessUrl("/login").invalidateHttpSession(true);
        }
     
        @Override
        protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        
            auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
        }
     
        @Bean
        public PasswordEncoder passwordEncoder() {
        
            return new BCryptPasswordEncoder();
        }
    }

在上述代码中，我们配置了以下规则：

所有以/api/public开头的请求都不需要认证即可访问。  
所有以/api/private开头的请求都需要认证才能访问。  
登录页面为/login，登录成功后默认跳转到根路径/。  
注销路径为/logout，注销成功后跳转到登录页面。  
在AuthenticationManagerBuilder中指定了用户认证服务和密码加密方式。  
为了实现用户认证，我们需要创建一个实现了UserDetailsService接口的用户认证服务。UserDetailsService是一个Spring Security的核心接口，用于查询用户信息。我们可以通过重写该接口的loadUserByUsername方法来实现自定义的用户认证逻辑。

@Service
    public class UserDetailsServiceImpl implements UserDetailsService {
        
     
        @Autowired
        private UserRepository userRepository;
     
        @Override
        public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        
            User user = userRepository.findByUsername(username);
            if (user == null) {
        
                throw new UsernameNotFoundException("用户不存在");
            }
            List<SimpleGrantedAuthority> authorities = user.getRoles().stream()
                    .map(role -> new SimpleGrantedAuthority(role.getName()))
                    .collect(Collectors.toList());
            return new org.springframework.security.core.userdetails.User(user.getUsername(), user.getPassword(),
                    authorities);
        }
    }

在上述代码中，我们通过注入UserRepository来查询用户信息。然后，我们将查询到的用户角色信息转换为Spring Security的授权信息，并返回一个UserDetails对象。

至此，我们已经完成了用户认证和权限控制的实现。通过这个系统，我们可以实现用户登录、注销和权限控制等基础功能。

##### 12. 完整的AddUser.vue组件代码： #####

<template>
      <div>
        <h2>Add User</h2>
        <form>
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" v-model="user.username" required>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" v-model="user.email" required>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" v-model="user.password" required>
          </div>
          <div class="form-group">
            <label for="roles">Roles</label>
            <select multiple class="form-control" id="roles" v-model="user.roles">
              <option v-for="role in roles" :key="role.id" :value="role">{
        {
         role.name }}</option>
            </select>
          </div>
          <button type="button" class="btn btn-primary" @click="addUser">Add User</button>
        </form>
      </div>
    </template>
    
    <script>
    import axios from 'axios';
    
    export default {
        
      name: 'AddUser',
      data() {
        
        return {
        
          user: {
        
            username: '',
            email: '',
            password: '',
            roles: []
          },
          roles: []
        }
      },
      created() {
        
        axios.get('/api/roles')
          .then(response => {
        
            this.roles = response.data;
          })
          .catch(error => {
        
            console.log(error);
          });
      },
      methods: {
        
        addUser() {
        
          axios.post('/api/users', this.user)
            .then(response => {
        
              this.$router.push({
         name: 'UserList' });
            })
            .catch(error => {
        
              console.log(error);
            });
        }
      }
    }
    </script>
    
    <style scoped>
    .form-group {
        
      margin-bottom: 1rem;
    }
    </style>

在这个组件中，我们使用了Bootstrap的样式来美化表单。我们从后端获取了所有的角色列表，将其渲染到了下拉列表中。同时，我们绑定了一个addUser方法，在点击“Add User”按钮时将用户信息提交到后端创建一个新用户。

##### 13. 完整的UserForm.vue组件代码： #####

<template>
      <div>
        <form>
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" v-model="user.username" required>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" v-model="user.email" required>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" v-model="user.password" required>
          </div>
          <div class="form-group">
            <label for="roles">Roles</label>
            <select multiple class="form-control" id="roles" v-model="user.roles">
              <option v-for="role in roles" :key="role.id" :value="role">{
        {
         role.name }}</option>
            </select>
          </div>
          <button type="button" class="btn btn-primary" @click="submitForm">{
        {
         submitButtonLabel }}</button>
        </form>
      </div>
    </template>
    
    <script>
    import axios from 'axios';
    
    export default {
        
      name: 'UserForm',
      props: {
        
        user: {
        
          type: Object,
          default: () => {
        
            return {
        
              username: '',
              email: '',
              password: '',
              roles: []
            };
          }
        },
        roles: {
        
          type: Array,
          default: () => {
        
            return [];
          }
        },
        submitButtonLabel: {
        
          type: String,
          default: 'Submit'
        },
        onSubmit: {
        
          type: Function,
          default: () => {
        
            console.log('Submit function not provided');
          }
        }
      },
      methods: {
        
        submitForm() {
        
          this.onSubmit(this.user);
        }
      }
    }
    </script>
    
    <style scoped>
    .form-group {
        
      margin-bottom: 1rem;
    }
    </style>

在这个组件中，我们使用了Bootstrap的样式来美化表单。我们从父组件中传递了一个user对象、roles数组和submitButtonLabel属性，分别用于渲染表单元素和提交按钮。同时，我们使用了props属性来声明这些属性。最后，我们绑定了一个submitForm方法，在点击提交按钮时将用户信息传递给父组件的onSubmit方法处理。