En primer lugar, aclaremos qué es Spring Security y los interceptores de ruta de separación de front-end y back-end. Spring Security es un marco de seguridad basado en Spring Framework, que proporciona una serie de servicios de seguridad, que incluyen, entre otros, autenticación, autorización, encriptación y administración de sesiones. El interceptor de ruta de separación de front-end y back-end se refiere a interceptar y filtrar la ruta solicitada de acuerdo con los roles y permisos del usuario cuando el front-end y el back-end están separados.
A continuación, presentaremos en detalle cómo usar Spring Security para implementar interceptores de ruta de separación de front-end y back-end.
1. Proyecto de construcción
Primero debemos crear un proyecto de Spring Boot, usar Maven para compilar, agregar dependencias de Spring Security y las dependencias requeridas para la separación de front-end y back-end. El archivo pom.xml específico es el siguiente:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
2. Configuración de permisos
A continuación, necesitamos configurar algunos permisos. Aquí asumimos que hay dos roles, uno es administrador y el otro es un usuario común. El administrador puede ver la información de todos los usuarios, mientras que el usuario común solo puede ver su propia información. . Podemos usar el siguiente código para el control de caracteres:
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/admin/**").hasRole("ADMIN")
.antMatchers("/user/**").hasRole("USER")
.anyRequest().authenticated()
.and()
.httpBasic()
.and()
.csrf().disable();
}
Aquí usamos HttpSecurityla configuración proporcionada por Spring Security para la interceptación de rutas. Lo usamos antMatcherspara establecer reglas de coincidencia de rutas y podemos usar hasRoleo hasAuthorityrealizar control de acceso en rutas que cumplen con las reglas. Por ejemplo, los administradores pueden acceder a /admin/**los recursos con la ruta, mientras que los usuarios normales solo pueden acceder a /user/**los recursos con la ruta.
Aquí también desactivamos la protección CSRF. Este es un mecanismo de seguridad que puede prevenir ataques de falsificación de solicitudes entre sitios, pero causará ciertas dificultades en el desarrollo front-end. Debido a limitaciones de espacio, no explicaré el mecanismo en detalle aquí.
3. Autenticación y autorización del usuario
Después de configurar los permisos, necesitamos autenticar y autorizar a los usuarios. Aquí usamos la interfaz provista por Spring Security UserDetailsServicepara obtener información del usuario y PasswordEncodercifrar las contraseñas de los usuarios. Aquí, usamos MySQL como base de datos y JPA para la gestión de persistencia de datos. Podemos usar el siguiente código para la autenticación y autorización del usuario:
@Override
public void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userDetailsService)
.passwordEncoder(passwordEncoder());
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
4. Implementación frontal
Finalmente, echemos un vistazo a cómo usar estos controles de permisos en la interfaz. Podemos establecer diferentes roles para diferentes rutas en el front-end, como el siguiente fragmento de código:
import request from '@/utils/request'
// 后台获取用户信息接口
function getUserInfo() {
return request({
url: '/user/info',
method: 'get',
params: {
}
})
}
// 后台获取所有用户信息接口
export function getAllUserInfo() {
return request({
url: '/admin/userinfo',
method: 'get'
})
}
En el código anterior, usamos axios para enviar la solicitud HTTP y colocar la información del rol del usuario en el encabezado de la solicitud. En la configuración de enrutamiento de front-end, establecemos diferentes roles para diferentes rutas, de la siguiente manera:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import UserInfo from './views/UserInfo.vue'
import AllUser from './views/AllUser.vue'
Vue.use(Router)
export const constantRoutes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
role: ['user', 'admin'] } // 普通用户和管理员都可以访问
},
{
path: '/about',
name: 'about',
component: About,
meta: {
role: ['admin'] } // 只有管理员可以访问
},
{
path: '/userinfo',
name: 'userinfo',
component: UserInfo,
meta: {
role: ['user', 'admin'] } // 普通用户和管理员都可以访问
},
{
path: '/alluser',
name: 'alluser',
component: AllUser,
meta: {
role: ['admin'] } // 只有管理员可以访问
}
]
const createRouter = () => new Router({
mode: 'history',
scrollBehavior: () => ({
y: 0 }),
routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
Aquí usamos metacampos para almacenar información de roles, como role: ['user', 'admin']indicar que solo los usuarios con roles de usuario y administrador pueden acceder a esta ruta. Cuando la ruta cambia, podemos escuchar beforeEachel evento e interceptar la ruta, el código es el siguiente:
router.beforeEach((to, from, next) => {
const role = sessionStorage.getItem("role");
if (to.meta && to.meta.role) {
if (to.meta.role.includes(role)) {
return next();
} else {
return next({
name: "home" });
}
}
return next();
})
Aquí lo usamos sessionStoragepara almacenar la información del rol del usuario actual. Cuando la ruta cambia, sessionStorageobtenemos y luego interceptamos la ruta. Si el usuario actual no tiene permiso para acceder a la ruta, saltará a la página de inicio.
Resumir
A través de la introducción de este blog, hemos aprendido cómo usar Spring Security para implementar interceptores de ruta de separación de front-end y back-end. Específicamente, construimos un proyecto Spring Boot y configuramos permisos para controlar el acceso a las rutas para diferentes roles. Además, también presentamos cómo implementar el control de permisos en el front-end y realizar el control de acceso a diferentes rutas a través de la cooperación de axios y el enrutador. Al final, realizamos un proyecto de separación de front-end y back-end relativamente completo.