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

简介: Spring Boot 和 Vue.js 实现的前后端分离的用户权限管理系统
后端实现
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>

Login.vue

<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方法处理。

目录
相关文章
|
7天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
17 0
springboot从控制器请求至页面时js失效的解决方法
|
7天前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
50 0
|
7天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
17 0
|
1天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
8 0
|
4天前
|
监控 安全 NoSQL
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
MES系统是一套具备实时管理能力,建立一个全面的、集成的、稳定的制造物流质量控制体系;对生产线、工艺、人员、品质、效率等多方位的监控、分析、改进,满足精细化、透明化、自动化、实时化、数据化、一体化管理,实现企业柔性化制造管理。
29 3
|
7天前
|
JavaScript Java 数据库连接
Spring Boot 2.0+Mybatis+Vue的轻量级后台管理系统
Spring Boot 2.0+Mybatis+Vue的轻量级后台管理系统
|
7天前
|
Java 应用服务中间件 Maven
SpringBoot 项目瘦身指南
SpringBoot 项目瘦身指南
64 0
|
7天前
|
缓存 安全 Java
Spring Boot 面试题及答案整理,最新面试题
Spring Boot 面试题及答案整理,最新面试题
143 0
|
7天前
|
存储 JSON Java
SpringBoot集成AOP实现每个接口请求参数和返回参数并记录每个接口请求时间
SpringBoot集成AOP实现每个接口请求参数和返回参数并记录每个接口请求时间
50 2
|
7天前
|
前端开发 搜索推荐 Java
【Spring底层原理高级进阶】基于Spring Boot和Spring WebFlux的实时推荐系统的核心:响应式编程与 WebFlux 的颠覆性变革
【Spring底层原理高级进阶】基于Spring Boot和Spring WebFlux的实时推荐系统的核心:响应式编程与 WebFlux 的颠覆性变革