我们需要设计两个表:用户表和角色表。
用户表
字段 类型 描述
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) 状态
使用 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
在 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.Driverspring.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
创建 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 codeprivate 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;
}
创建 UserRepository、RoleRepository 和 UserRoleRepository,用于操作数据库。
UserRepository.java
@Repository
public interface UserRepository extends JpaRepository {User findByUsername(String username);
}
RoleRepository.java
java
Copy code
@Repository
public interface RoleRepository extends JpaRepository {
}
UserRoleRepository.java
java
Copy code
@Repository
public interface UserRoleRepository extends JpaRepository {List findByUserId(Long userId);
}
创建 UserService、RoleService 和 UserRoleService,用于处理业务逻辑。
UserService.java
@Service
public class UserService {@Autowiredprivate UserRepository userRepository;@Autowiredprivate UserRoleRepository userRoleRepository;public User findByUsername(String username) {return userRepository.findByUsername(username);}public List findUserRolesByUserId(Long userId) {return userRoleRepository.findByUserId(userId);}
}
RoleService.java
@Service
public class RoleService {@Autowiredprivate RoleRepository roleRepository;
}
UserRoleService.java
java
Copy code
@Service
public class UserRoleService {@Autowiredprivate UserRoleRepository userRoleRepository;
}
创建 UserController、RoleController 和 UserRoleController,用于处理请求。
UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {@Autowiredprivate UserService userService;@GetMapping("/{username}")public User findByUsername(@PathVariable String username) {return userService.findByUsername(username);}@GetMapping("/{userId}/roles")public List findUserRolesByUserId(@PathVariable Long userId) {return userService.findUserRolesByUserId(userId);}
}
RoleController.java
@RestController
@RequestMapping("/api/role")
public class RoleController {@Autowiredprivate RoleService roleService;@GetMapping("")public List findAll() {return roleService.findAll();}
}
UserRoleController.java
@RestController
@RequestMapping("/api/userRole")
public class UserRoleController {@Autowiredprivate UserRoleService userRoleService;
}
使用 Maven 命令 mvn spring-boot:run 启动应用,或者直接运行 UserManagementApplication 类。
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Autowiredprivate UserDetailsServiceImpl userDetailsService;@Autowiredprivate JwtAuthenticationEntryPoint unauthorizedHandler;@Beanpublic JwtAuthenticationFilter jwtAuthenticationFilter() {return new JwtAuthenticationFilter();}@Overridepublic void configure(AuthenticationManagerBuilder authenticationManagerBuilder) throws Exception {authenticationManagerBuilder.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());}@Bean(BeanIds.AUTHENTICATION_MANAGER)@Overridepublic AuthenticationManager authenticationManagerBean() throws Exception {return super.authenticationManagerBean();}@Beanpublic PasswordEncoder passwordEncoder() {return new BCryptPasswordEncoder();}@Overrideprotected 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认证过滤器。
使用 Vue CLI 创建项目:
vue create user-management
在 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 安装依赖。
在 src/main.js 中添加以下代码:
import axios from 'axios'axios.defaults.baseURL = 'http://localhost:8080/api'Vue.prototype.$http = axios
在 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
在 src/views 目录下创建以下页面:
Home.vue
用户管理
用户名 邮箱 手机号码 操作 {{ user.username }} {{ user.email }} {{ user.phone }}
Login.vue
登录
在 src/main.js
中添加以下代码:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'Vue.use(ElementPlus)
在项目根目录下执行以下命令运行项目:
npm run serve
然后在浏览器中访问 http://localhost:8080 查看效果。
以上代码只是简单地实现了用户列表的显示以及登录功能的实现,还需要进一步完善和优化。同时,还需要在后端实现相应的接口。
在 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 表示该路由需要登录才能访问。
在 src/main.js 中添加以下代码:
router.beforeEach((to, from, next) => {if (to.meta.requireAuth && !localStorage.getItem('token')) {next({path: '/login',query: { redirect: to.fullPath }})} else {next()}
})
这段代码的作用是,在用户访问需要登录才能访问的路由时,检查用户是否已登录。如果用户未登录,则跳转到登录页面,并将目标路由的路径保存到查询参数中,以便用户登录成功后自动跳转到目标路由。
在 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 方法分别对应获取用户列表、获取单个用户、创建用户、更新用户和删除用户。
在 src/views 目录下创建 UserList.vue 文件,并添加以下代码:
用户列表
添加用户 用户名 邮箱 角色 操作 {{ user.username }} {{ user.email }} {{ user.roles.map(role => role.name).join(', ') }} 编辑
这个文件中,我们使用了vue-router和axios库。在fetchUserList方法中,我们使用axios库发起了一个GET请求来获取用户列表。在deleteUser方法中,我们使用axios库发起了一个DELETE请求来删除用户。
接下来我们将完成系统的权限控制部分。在Spring Security中,权限控制通常通过定义安全配置类来实现。
首先,我们需要创建一个实现了WebSecurityConfigurer接口的安全配置类SecurityConfig。在这个类中,我们可以配置用户认证和授权规则。
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Autowiredprivate UserDetailsService userDetailsService;@Overrideprotected 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);}@Overrideprotected void configure(AuthenticationManagerBuilder auth) throws Exception {auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());}@Beanpublic PasswordEncoder passwordEncoder() {return new BCryptPasswordEncoder();}
}
在上述代码中,我们配置了以下规则:
所有以/api/public开头的请求都不需要认证即可访问。
所有以/api/private开头的请求都需要认证才能访问。
登录页面为/login,登录成功后默认跳转到根路径/。
注销路径为/logout,注销成功后跳转到登录页面。
在AuthenticationManagerBuilder中指定了用户认证服务和密码加密方式。
为了实现用户认证,我们需要创建一个实现了UserDetailsService接口的用户认证服务。UserDetailsService是一个Spring Security的核心接口,用于查询用户信息。我们可以通过重写该接口的loadUserByUsername方法来实现自定义的用户认证逻辑。
@Service
public class UserDetailsServiceImpl implements UserDetailsService {@Autowiredprivate UserRepository userRepository;@Overridepublic UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {User user = userRepository.findByUsername(username);if (user == null) {throw new UsernameNotFoundException("用户不存在");}List 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对象。
至此,我们已经完成了用户认证和权限控制的实现。通过这个系统,我们可以实现用户登录、注销和权限控制等基础功能。
Add User
在这个组件中,我们使用了Bootstrap的样式来美化表单。我们从后端获取了所有的角色列表,将其渲染到了下拉列表中。同时,我们绑定了一个addUser方法,在点击“Add User”按钮时将用户信息提交到后端创建一个新用户。
在这个组件中,我们使用了Bootstrap的样式来美化表单。我们从父组件中传递了一个user对象、roles数组和submitButtonLabel属性,分别用于渲染表单元素和提交按钮。同时,我们使用了props属性来声明这些属性。最后,我们绑定了一个submitForm方法,在点击提交按钮时将用户信息传递给父组件的onSubmit方法处理。