使用 Spring Boot + Redis + Vue 实现动态路由加载页面

🕗 发布于 2024-09-21 07:47 spring boot redis vue.js 开发语言 python

在现代 Web 应用开发中，动态路由加载能够显著提升应用的灵活性和安全性。本文将深入探讨如何利用 Spring Boot、Redis、Element UI 和 Vue 技术栈实现动态路由加载，并通过 Redis 生成和验证有效链接以实现页面访问控制。我们将从技术选型、环境搭建、代码实现以及应用场景等方面进行详细讲解。

一、技术选型和环境搭建

1.1 技术选型

Spring Boot：用于构建后端服务，提供快速开发、配置简化和内嵌服务器等优点。
Redis：用于存储和管理动态路由数据，提供高性能的键值对存储。
Element UI：用于前端界面的构建，提供丰富的组件库。
Vue.js：用于前端框架，提供响应式数据绑定和组件化开发。

1.2 环境搭建

在开始之前，我们需要确保开发环境中已经安装并配置了以下工具：

Java：JDK 8 及以上版本
Maven：用于项目构建和依赖管理
Redis：需要安装并运行 Redis 服务
Node.js 和 npm：用于前端项目的构建和依赖管理
IDE：推荐使用 IntelliJ IDEA 或 Eclipse

1.3 创建 Spring Boot 项目

首先，我们需要创建一个 Spring Boot 项目并引入必要的依赖。可以使用 Spring Initializr（https://start.spring.io/）生成一个新的 Spring Boot 项目，选择以下依赖：

Spring Web
Spring Data Redis
Spring Security
Thymeleaf
Lombok

生成项目后，下载并解压，导入到 IDE 中。在 pom.xml 文件中，我们需要添加 Redis 和 Spring Security 的依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

二、后端实现

2.1 配置 Redis

在 application.properties 文件中添加 Redis 的配置信息：

spring.redis.host=localhost
spring.redis.port=6379
spring.redis.password=

2.2 创建 Redis 配置类

我们需要创建一个 Redis 配置类来设置 RedisTemplate，以便于在服务类中使用 Redis 操作：

@Configuration
public class RedisConfig {
    @Bean
    public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory redisConnectionFactory) {
        RedisTemplate<String, Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setConnectionFactory(redisConnectionFactory);
        redisTemplate.setKeySerializer(new StringRedisSerializer());
        redisTemplate.setValueSerializer(new GenericJackson2JsonRedisSerializer());
        return redisTemplate;
    }
}

在这个配置类中，我们通过 RedisConnectionFactory 创建了 RedisTemplate 实例，并设置了键的序列化器为 StringRedisSerializer，值的序列化器为 GenericJackson2JsonRedisSerializer，以确保我们可以存储和读取复杂的数据结构。

2.3 创建 Token 服务类

接下来，我们需要创建一个服务类，用于生成和验证令牌（token）。我们将令牌存储在 Redis 中，并设定一个过期时间，以控制令牌的有效期。

@Service
public class TokenService {

    private final RedisTemplate<String, Object> redisTemplate;

    @Autowired
    public TokenService(RedisTemplate<String, Object> redisTemplate) {
        this.redisTemplate = redisTemplate;
    }

    public String generateToken(String username) {
        String token = UUID.randomUUID().toString();
        redisTemplate.opsForValue().set(token, username, 1, TimeUnit.HOURS);
        return token;
    }

    public boolean validateToken(String token) {
        return redisTemplate.hasKey(token);
    }
}

在 TokenService 类中，我们定义了两个方法：

generateToken：生成一个唯一的 UUID 作为 token，并将其与用户名一起存储在 Redis 中，设定有效期为 1 小时。
validateToken：验证 token 是否存在于 Redis 中，返回验证结果。

2.4 创建控制器

我们还需要一个控制器来处理用户登录和 token 验证请求。在 AuthController 中，我们定义了两个 API 接口：一个用于登录并生成 token，另一个用于验证 token 的有效性。

@RestController
@RequestMapping("/api")
public class AuthController {

    private final TokenService tokenService;

    @Autowired
    public AuthController(TokenService tokenService) {
        this.tokenService = tokenService;
    }

    @PostMapping("/login")
    public ResponseEntity<String> login(@RequestBody LoginRequest loginRequest) {
        // 验证用户名和密码（此处省略验证逻辑）
        String token = tokenService.generateToken(loginRequest.getUsername());
        return ResponseEntity.ok(token);
    }

    @GetMapping("/validate")
    public ResponseEntity<Boolean> validateToken(@RequestParam String token) {
        boolean isValid = tokenService.validateToken(token);
        return ResponseEntity.ok(isValid);
    }
}

在这个控制器中，我们定义了两个端点：

POST /api/login：接受 LoginRequest 对象，验证用户名和密码（这里省略了实际的验证逻辑），生成 token 并返回。
GET /api/validate：接受一个 token 参数，调用 TokenService 验证 token 的有效性，并返回结果。

2.5 创建登录请求类

我们需要一个简单的 POJO 类来表示登录请求：

@Data
public class LoginRequest {
    private String username;
    private String password;
}

2.6 配置 Spring Security

为了保护我们的 API，我们需要配置 Spring Security。创建一个 SecurityConfig 类，并禁用 CSRF 保护，使会话管理策略为无状态（无会话）。

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/login").permitAll()
            .anyRequest().authenticated()
            .and()
            .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

在这个配置中，我们禁用了 CSRF 保护，将 /api/login 设置为允许所有人访问，其他请求需要认证，并设定会话管理策略为无状态，确保我们的 API 是无状态的。

三、前端实现

3.1 配置 Vue 和 Element UI

在 main.js 中引入 Element UI 和 Vue Router：

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router';

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

我们首先在 main.js 文件中引入并使用 Element UI，并设置 Vue 实例挂载到 #app 节点上。

3.2 配置 Vue Router

在 router/index.js 中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import Login from '@/components/Login.vue';
import Protected from '@/components/Protected.vue';

Vue.use(Router);

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  {
    path: '/protected',
    component: Protected,
    meta: { requiresAuth: true }
  }
];

const router = new Router({
  mode: 'history',
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const token = localStorage.getItem('token');
    if (!token) {
      next({ path: '/login' });
    } else {
      // 验证 token
      fetch(`/api/validate?token=${token}`)
        .then(response => response.json())
        .then(isValid => {
          if (isValid) {
            next();
          } else {
            next({ path: '/login' });
          }
        });
    }
  } else {
    next();
  }
});

export default router;

在 router/index.js 文件中，我们定义了三个路由：/、/login 和 /protected。其中 /protected 路由带有 requiresAuth 元数据，表示该路由需要进行身份验证。我们在路由守卫中，检查是否存在 token，并通过调用 /api/validate 接口验证 token 的有效性。

3.3 创建登录组件

在 components/Login.vue 中创建登录组件：

<template>
  <el-form @submit.native.prevent="onSubmit">
    <el-form-item>
      <el-input v-model="username" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    onSubmit() {
      fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username: this.username, password: this.password })
      })
        .then(response => response.json())
        .then(token => {
          localStorage.setItem('token', token);
          this.$router.push('/protected');
        });
    }
  }
};
</script>

在 Login.vue 文件中，我们创建了一个登录表单，并在表单提交时调用 onSubmit 方法，发送登录请求到 /api/login 接口。如果登录成功，将返回 token 并存储到 localStorage 中，然后重定向到受保护的页面 /protected。

3.4 创建受保护的组件

在 components/Protected.vue 中创建受保护的组件：

<template>
  <div>
    <h1>受保护的页面</h1>
    <p>只有登录用户才能访问这个页面。</p>
  </div>
</template>

<script>
export default {};
</script>

这个简单的受保护组件只有登录后才能访问。我们在这里可以根据实际需求添加更多内容和功能。

四、动态路由的实现

4.1 获取用户角色和路由配置

在实际应用中，我们通常需要根据用户角色动态加载不同的页面。例如，在用户登录后，根据其角色从后端获取相应的路由配置，并在前端动态添加这些路由。在后端，我们可以创建一个 API 来根据用户角色返回相应的路由配置：

@RestController
@RequestMapping("/api")
public class RouteController {

    @GetMapping("/routes")
    public ResponseEntity<List<Route>> getRoutes(@RequestParam String role) {
        List<Route> routes = getRoutesByRole(role);
        return ResponseEntity.ok(routes);
    }

    private List<Route> getRoutesByRole(String role) {
        List<Route> routes = new ArrayList<>();
        if ("ADMIN".equals(role)) {
            routes.add(new Route("/admin", "AdminComponent"));
        } else if ("USER".equals(role)) {
            routes.add(new Route("/user", "UserComponent"));
        }
        return routes;
    }
}

@Data
@AllArgsConstructor
@NoArgsConstructor
class Route {
    private String path;
    private String component;
}

在这个控制器中，我们根据用户角色返回相应的路由配置。为了简单起见，我们在示例中使用了静态配置，实际应用中可以根据业务需求从数据库或其他数据源中获取动态路由配置。

4.2 前端动态加载路由

在前端，我们可以在用户登录后，根据其角色从后端获取相应的路由配置，并动态添加这些路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import Login from '@/components/Login.vue';

Vue.use(Router);

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
];

const router = new Router({
  mode: 'history',
  routes
});

function loadRoutes(role) {
  fetch(`/api/routes?role=${role}`)
    .then(response => response.json())
    .then(routes => {
      routes.forEach(route => {
        router.addRoute({
          path: route.path,
          component: () => import(`@/components/${route.component}.vue`)
        });
      });
    });
}

export { router, loadRoutes };

在 router/index.js 中，我们定义了一个 loadRoutes 方法，该方法根据用户角色从后端获取路由配置，并动态添加到 Vue Router 中。在登录组件中，当用户登录成功后调用 loadRoutes 方法：

<template>
  <el-form @submit.native.prevent="onSubmit">
    <el-form-item>
      <el-input v-model="username" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="password" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { loadRoutes } from '@/router';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    onSubmit() {
      fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username: this.username, password: this.password })
      })
        .then(response => response.json())
        .then(token => {
          localStorage.setItem('token', token);
          const role = 'USER'; // 示例角色，实际应用中根据 token 解析
          loadRoutes(role);
          this.$router.push('/protected');
        });
    }
  }
};
</script>

五、应用场景

动态路由加载的应用场景非常广泛，以下是几个典型的应用场景：

5.1 后台管理系统

在后台管理系统中，不同的用户角色（如管理员、普通用户、访客）具有不同的权限和访问页面。通过动态路由加载，我们可以根据用户角色动态加载相应的管理页面，确保用户只能访问其权限范围内的页面。

5.2 内容管理系统

在内容管理系统中，不同的内容类型或栏目可能需要不同的页面布局和功能。通过动态路由加载，我们可以根据内容类型动态加载相应的页面组件，提高系统的灵活性和可维护性。

5.3 电商平台

在电商平台中，不同的用户（如买家、卖家、管理员）具有不同的操作和管理页面。通过动态路由加载，我们可以根据用户身份动态加载相应的页面，提供个性化的用户体验。

5.4 教育平台

在教育平台中，不同的用户（如学生、教师、管理员）具有不同的功能模块和页面。通过动态路由加载，我们可以根据用户角色动态加载相应的功能模块，确保系统的灵活性和扩展性。

六、总结

通过本文的介绍，我们详细讲解了如何使用 Spring Boot、Redis、Element UI 和 Vue 实现动态路由加载页面。从技术选型、环境搭建、后端实现、前端实现，到应用场景的讲解，我们全面展示了动态路由加载的实现思路和方法。

这种技术方案可以灵活应用于各种需要动态路由和权限控制的场景，如后台管理系统、内容管理系统、电商平台和教育平台等。在实际应用中，我们还可以进一步优化和扩展此方案，以满足更多业务需求。

希望本文对你在实际项目中实现动态路由加载有所帮助。如果你有任何问题或建议，欢迎在评论区留言，我们将及时回复并解答。

原文地址：https://blog.csdn.net/qq_21484461/article/details/140758704

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Redis的持久化和高可用性
下一篇：基于SpringBoot+Vue+MySQL的高校心理教育辅导系统

解决 Spring Boot 中 `Ambiguous mapping. Cannot map ‘xxxController‘ method` 错误
在使用 Spring Boot 开发 Web 应用时，经常会遇到各种各样的错误。其中一种常见的错误是。本文将详细介绍这个错误的原因及解决方法，帮助开发者快速定位并解决问题。解决错误的关键在于确保每个方
阅读更多2024-11-15
数据分析案例-笔记本电脑价格数据可视化分析
本实验数据集来源于Kaggle，原始数据集共有1303条数据，13个变量，各变量含义如下：0 laptop_ID-数字-产品ID1 Company-字符串-笔记本电脑制造商2 Product-字符串-
阅读更多2024-11-15
Linux 如何查看当前系统版本的详细信息？
系统中基本都存在，所以是一种标准的获取系统信息的方式。命令以标准的方式提供详细的发行版信息。发行版的说明文件一般位于。
阅读更多2024-11-15
初级数据结构——栈
数据结构栈（Stack）是一种线性的数据结构，它只允许在序列的一端（称为栈顶）进行插入和删除操作。这种特性使得栈成为许多算法和问题解决中的有力工具。栈是一种简单而强大的数据结构，它遵循后进先出的原则，
阅读更多2024-11-15
网络安全练习之 ctfshow_web
根据前面得到的qq邮箱中的qq号查询用户，目前电脑版的QQ添加好友好像不能查看详细信息，手机版的可以看到对方所在地为陕西西安。路径是：/editor/attached/file/tmp/html/no
阅读更多2024-11-15
Python 三种方式实现自动化任务
本文介绍了用Python实现机器人过程自动化的三个包，方便读者选择、对比学习。
阅读更多2024-11-15
C++基础：Pimpl设计模式的实现
PIMPL （ Private Implementation 或 Pointer to Implementation ）是通过一个私有的成员指针，将指针所指向的类的内部实现数据进行隐藏。
阅读更多2024-11-15
【flutter】flutter2升级到3.
以这个 https://github.com/aa286211636/Flutter_QQ 为例子，升级下看看。只有登录界面能正常显示，别的页面都是报错。flutter这版本变动，基本不能直接ru
阅读更多2024-11-15
【JAVA毕业设计】基于Vue和SpringBoot的宠物咖啡馆平台
基于Vue.js和SpringBoot的宠物咖啡馆平台是一个综合性的在线服务系统，旨在为宠物爱好者提供一个便捷的宠物护理和社交场所。该平台分为管理后台和用户网页端，以满足不同用户群体的需求。管理后台主
阅读更多2024-11-15
认证鉴权框架SpringSecurity-2--重点组件和过滤器链篇
这4个接口中，每一个都是当认证或者授权过程中发生结果后触发，可以是失败的场景也可以是成功后触发。1个成功后执行，3个为失败后促发执行。
阅读更多2024-11-15