功能性的安全性保障：TOKEN鉴权校验

Hardy Army

已于 2024-07-25 10:06:05 修改

阅读量986

点赞数 32

分类专栏：代码分析文章标签： java vue 安全

于 2024-07-24 22:54:25 首次发布

本文链接：https://blog.csdn.net/weixin_44073008/article/details/140661263

版权

代码分析专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

在软件开发过程中，确保系统的安全性是至关重要的一环。它不仅关乎保护用户数据的完整性和隐私性，也是维护系统稳定运行的基石。我认为，从宏观角度审视，软件开发的安全性保障主要可分为两大类：功能性的安全性保障和系统性的安全性校验。

功能性的安全性保障专注于应用程序层面，它着眼于那些直接影响用户数据和交互过程安全的特性。这些特性是构建用户信任和保障数据安全的关键。

而系统性的安全性校验则放眼于更为广阔的视角，它涵盖了整个系统架构和网络层面，确保从服务器到网络的每一环节都具备足够的防御能力，以抵御各种潜在的攻击。

在前文功能性的安全性保障：实现强制登录和密码加密功能，我们已经讨论了功能性的安全性保障中的两个核心议题：身份验证和密码加密。所以在本文中，我们将继续从功能性的安全性保障这个话题展开，通过对概念的细致解读、实施策略的全面分析，以及实际代码实现的展示，深入讨论其中的另外一个核心议题：TOKEN鉴权校验。

1. Token的定义

当我们准备使用Token进行鉴权校验时，首先得先了解Token是什么，我们才能扩展下去。这里简单讲下，所谓Token，是一种数据对象，通常由一组字符组成，主要用户身份验证和授权信息。通常所说的Token可以是多种形式，例如Session ID、Bearer Token、Access Token等。它们的安全性取决于如何生成、存储和传输。

2. JWT（Json Web Token）：用户的身份和权限验证

在实际项目中，常用JWT作为Token来验证用户的身份和权限，确保请求的合法性。这种机制允许系统在不直接存储用户敏感信息的情况下，对用户进行身份验证和授权。

JSON Web Tokens (JWT) 是一种广泛采用的、用于在不同实体间安全传输信息的开放标准（RFC
7519）。它定义了一种紧凑且自包含的方式，允许通过JSON对象在通信双方之间传递安全性声明。这种机制不仅确保了信息的完整性和可验证性，还通过使用数字签名技术，保障了其安全性。

在JWT的框架下，令牌（Token）本身封装了一系列声明（Claims），这些声明可以被应用程序用来控制对资源的访问权限。这些声明包括但不限于用户的身份信息、权限级别以及令牌的有效期等。JWT的令牌通常采用JSON Web Signature (JWS) 进行签名，确保了其内容的不可篡改性和验证的可靠性。

2.1 JWT的构成

一个JWT由三部分组成，用点 . 分隔：

Header（头部）：通常包含令牌的类型（即JWT）和所使用的签名算法（如HS256或RS256）。
Payload（负载）：包含所谓的Claims（声明），它们是关于实体（通常是用户）和其他数据的声明。例如，用户ID、用户名、角色信息等。
Signature（签名）：用于验证消息在传输过程中未被篡改，并且，对于使用私钥签名的令牌，还可以验证发送者的身份。

2.2 签名机制

特别地，JWT的签名过程常采用RSA公钥-私钥对机制。这种方式不仅提供了强大的安全保障，还使得JWT在各种应用场景中，如单点登录（SSO）、移动应用认证等，都能发挥其独特的优势。通过这种方式，JWT成为了一种理想的解决方案，用于发布和验证接入令牌（Access Tokens），从而在不同的服务和应用程序之间实现安全、高效的用户认证和授权。

2.3 过期时间

JWT通常包含一个过期时间（exp），这有助于限制Token的生命周期，增加安全性。其他类型的Token可能也需要设置过期时间，但它们的管理方式可能不同。

3. Spring Security：基于令牌的认证机制

另外，还有个话题我们不得不关注，那就是Spring Security。Spring Security是一个功能强大且高度可自定义的认证和访问控制框架，是Spring项目的一部分。它为JVM（Java虚拟机）语言提供了一套全面的安全服务，主要用于保护基于Spring的应用程序。

简单来说，当用户尝试访问一个需要认证的网站或应用时，Spring Security会要求提供Token。只有提供了正确的Token，Spring Security才会让请求通过。

3.1 核心功能

认证（Authentication）：
确认用户身份，通常通过用户名和密码，但也支持多种其他认证方法（如OAuth2、JWT、LDAP等）。
提供内置的表单登录和HTTP基本认证。
授权（Authorization，也称为访问控制）：
决定已认证的用户是否有权访问某些资源或执行某些操作。
支持基于角色和权限的访问控制。
保护Web应用程序：
通过声明式的URL访问配置，定义哪些URL需要认证，哪些URL可以匿名访问。
支持防止常见的Web攻击，如CSRF（跨站请求伪造）、XSS（跨站脚本）等。
方法级安全：
使用注解（如 @Secured, @PreAuthorize, @PostAuthorize）对方法调用进行访问控制。
整合其他Spring项目：
无缝集成Spring Boot、Spring MVC、Spring Data等项目。

4. 代码实现：登录生成TOKEN，并使用TOKEN进行权限校验

4.1 前端代码实现

首先，我们基于之前开发的前端代码进行扩展，在主页创建一个头部导航栏、侧边栏。

<template>
  <el-container style="height: 100vh;">
    <el-header style="padding: 0; background-color:#545c64; height: 60px;">
      <TopNavbar/>
    </el-header>
    <el-container style="flex: 1; display: flex;">
      <SideNavbar />
      <el-main style="flex: 1; display: flex; justify-content: center; align-items: center;">
        <router-view class="my"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import TopNavbar from './TopNavbar.vue';
import SideNavbar from "@/views/SideNavbar.vue";

export default {
  name: 'HomePage',
  components: {
    SideNavbar,
    TopNavbar,
  }
};
</script>

<style>
.el-main {
  padding: 0;
}
</style>

头部导航栏主要定义两个按钮，分别是登录按钮和登出按钮，主要为了实现对TOKEN的创建和销毁。

<template>
    <div class="navbar">
        <div class="navbar-links">
            <div class="nav-item" v-if="true">
                <el-button @click="goToLogin">登录</el-button>
            </div>
          <div class="nav-item" v-if="true">
            <el-button @click="loginOut">退出</el-button>
          </div>
        </div>
    </div>
</template>  
  
<script >
import { ref } from 'vue';
export default {
  methods: {
    goToLogin() {
      this.$router.push({name: 'Login'});
    },
    loginOut() {
      fetch('http://localhost:8081/user/logout', {
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(response => {
        if (response.ok) {
          localStorage.removeItem('token');
          this.$router.push('/login');
        }
      }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>
<style scoped>
.navbar {
  display: flex;
  justify-content: flex-end; /* 确保内容靠右对齐 */
  align-items: center; /* 垂直居中对齐 */
  width: 100%;
}

.navbar-links {
  display: flex;
  justify-content: flex-end; /* 确保按钮靠右对齐 */
}

.nav-item {
  margin-right: 15px; /* 可选：增加按钮之间的间距 */
  margin-top: 10px;
}
</style>

左侧导航菜单包含两个主项：“首页” 和 “我的”，其中"我的"菜单项下包含个人信息。实现用户界面与路由的集成。

<template>
  <el-aside style="width: 200px; background-color: #545c64;">
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
             text-color="#fff" @select="handleSelect" :default-active="activeIndex">
      <el-sub-menu index="1">
        <template #title>
          <span>首页</span>
        </template>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <span>我的</span>
        </template>
        <el-menu-item index="2-1" @click="navigateTo('my-page')">个人信息</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: 'SideNavbar',
  data() {
    return {
      activeIndex: '2' // 默认激活的菜单项
    };
  },
  methods: {
    navigateTo(route) {
      this.$router.push({ name: route });
    },

    handleSelect(index, indexPath) {
      this.activeIndex = index;
    }
  }
};
</script>

接着定义一个个人信息页面，用于用户信息展示和头像上传功能。通过调用后端接口获取和上传数据，并使用 Element Plus 组件进行表单和消息提示的展示。这里目的是展示从本地存储中获取 token，将token作为接口携带参数，调用接口从服务器获取用户信息。如果 token 不存在，则通过 Element Plus 显示错误提示，提示用户需要登录，并重定向到登录页面。

<!-- MePage.vue -->
<template>
  <div class="me">
    <el-form :model="user" label-width="auto" style="max-width: 600px" enctype="multipart/form-data">
      <el-form-item label="头像">
        <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            accept="image/*"
            show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :on-change="handleFileChange"
        >
          <img v-if="imageUrl" style="height: 200px; width: 200px" alt="头像" class="avatar" :src="imageUrl"/>
          <el-icon class="avatar-uploader-icon" v-else-if="!islook"/>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="user.username"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="user.sex"/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="user.age"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.mailbox"/>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input v-model="user.introduce" type="textarea"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
  name: 'MePage',
  data() {
    return {
      user: {
        userId: '',
        sex: '',
        age: '',
        mailbox: '',
        username: '',
        introduce: '',
        headPortrait: ''
      },
      uploadUrl: 'http://localhost:8081/upload/avatar',
      islook: false,
      imgUrl: '../assets/logo.png',
      imageUrl: ''
    }
  },
  components: {},
  created() {
    this.getuser();
  },
  methods: {
    getuser() {
      const token = localStorage.getItem('token');
      console.log('token:', token);
      if (!token) {
        ElMessage.error('请先登录');
        this.$router.push('/login');
      }
      axios.get('http://localhost:8081/user/getById?userId=123', {headers: {Authorization: `Bearer ${token}`}}).then(response => {
        console.log('服务器返回的数据:', response.data);
        this.user = response.data.body;
        this.imageUrl = this.user.headPortrait ? `${this.user.headPortrait}` : '@/assets/logo.png';
        console.log('图片 URL:', this.imageUrl);
        this.islook = true;
      }).catch(error => {
        console.log(error);
        ElMessage.error('获取用户信息失败');
      });
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        ElMessage.error('只能上传图片文件！');
        return false;
      }
      return isImage;
    },
    handleSuccess(response) {
      console.log('图片 上传成功响应:', response);
      if (response.code === 200) {
        ElMessage.success('上传成功');
        console.log('上传成功');
        // 重新调用 getuser 方法以获取最新的头像地址
        this.getuser();
      } else {
        ElMessage.error('上传失败: ' + response.msg);
      }
    },
    handleError(err) {
      console.error('图片上传失败:', err);
      ElMessage.error('上传失败: ' + (err.message || '未知错误'));
    },
    handleFileChange(file) {
      // 更新显示的图片
      const fileURL = file.raw;
      this.imageUrl = URL.createObjectURL(fileURL);
    }
  }
}
</script>

<style scoped>
.me {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  height: 200px;
  width: 200px
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
</style>

路由这里我们要改下配置，在主页面下配置子页面路径为 '/my-page'。

const routes = [
    {
        path: '/',
        name: 'HomePage',
        component: HomePage,
        meta: {requiresAuth: true}, // 添加元信息，表示需要认证
        children: [
            {
                path: '/my-page',
                name: 'my-page',
                component: MePage,
            }
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/register',
        name: 'Register',
        component: Register
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/login' // 捕获所有未定义的路由并重定向到登录页面
    }
];

Login.vue组件也需要改下，若登录成功，则存储 TOKEN 到本地并跳转到主页；若登录失败，则显示相应的错误提示，捕获异常以便出错时给予用户反馈。

async login() {
      try {
        const params = new URLSearchParams();
        params.append('username', this.form.username);
        params.append('password', this.form.password);

        const response = await axios.post('http://127.0.0.1:8081/user/login', params);
        console.log("login response:", response);
        if (response.data.code === 200) {
          this.$message.success('登录成功');
          console.log("登录成功，获取到的TOKEN是： " + JSON.stringify(response.data.body))
          localStorage.setItem('token', response.data.body);
          this.$router.push('/');
        } else {
          if (response.data.extension && response.data.extension.error) {
            this.$message.error('登录失败: ' + response.data.extension.error);
            console.log(response.data.extension.error);
          } else {
            this.$message.error('登录失败');
            console.log('未知错误');
          }
        }
      } catch (error) {
        console.log(error);
        this.$message.error('登录失败');
      }
    }

4.2 后端功能实现

首先引入jwt和Spring Security的依赖

<dependency>
            <groupId>io.jsonwebtoken</groupId>
            <artifactId>jjwt</artifactId>
            <version>0.9.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

接着我们定义一个JWT工具类，用于生成 JWT Token、验证JWT Token以及反向解析Token，获取用户名。

/**
 * 功能描述：JWT工具类
 **/
public class JwtUtils {

    private static final String SECRET = "USER_JWT_SECRET";

    /**
     * 功能描述：根据用户名生成JWT token
     *
     * @param username 用户名
     * @return {@code String }
     */
    public static String generateToken(String username) {
        return Jwts.builder()
                .setSubject(username)
                .signWith(io.jsonwebtoken.SignatureAlgorithm.HS512, SECRET)
                .setExpiration(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 24)) // 24 小时过期
                .compact();
    }

    /**
     * 功能描述： 验证JWT token是否有效
     *
     * @param token Jwt Token
     * @return boolean
     */
    public static boolean validateToken(String token) {
        try {
            Jwts.parser().setSigningKey(SECRET).parseClaimsJws(token);
            return true;
        } catch (Exception e) {
            return false;
        }
    }

    /**
     * 功能描述： 从JWT token中获取用户名
     *
     * @param token Jwt Token
     * @return {@code String }
     */
    public static String getUsername(String token) {
        return Jwts.parser()
                .setSigningKey(SECRET)
                .parseClaimsJws(token)
                .getBody()
                .getSubject();
    }
}

定义好JwtUtils工具类后，预期是在前端请求后端时，校验是否传入Token以及传入Token的有效性。我们可以在每个接口定义Token校验，当时这样子无疑增加了工作量和代码复杂度，所以这里我使用AOP的形式，利用注解的形式，在接口被请求之前，自动去校验Token。

import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface TokenListener {
}

@Aspect
@Component
public class JwtAspect {

    @Before("@annotation(com.example.interestplfm.annotation.TokenListener) || @within(com.example.interestplfm.annotation.TokenListener)")
    public void validateToken() {
        HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
        String token = request.getHeader("Authorization");

        HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
        assert response != null;
        if (token != null && token.startsWith("Bearer ")) {
            token = token.substring(7);
            // 抛出异常，返回401状态码
            if (!JwtUtils.validateToken(token)) {
                response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                throw new IllegalArgumentException("用户未成功登录，请先登录！");
            }
        } else {
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            throw new IllegalArgumentException("用户未成功登录，请先登录！");
        }

    }
}

最后，我们在控制层实现用户相关接口，并对必要的接口进行Token权限校验。

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public RestResult<String> register(@RequestParam String username, @RequestParam String password) {
        if (userService.registerUser(username, password)) {
            return RestResult.build("User registered successfully");
        } else {
            Map<String, Object> extension = new HashMap<>();
            extension.put("error", "User already exists");
            return RestResult.buildFailure(extension);
        }
    }

    @PostMapping("/login")
    public RestResult<String> login(@RequestParam String username, @RequestParam String password) {
        User user = userService.verifyPassword(username, password);
        if (user != null) {
            String token = JwtUtils.generateToken(user.getUsername());
            return RestResult.build(token);
        } else {
            Map<String, Object> extension = new HashMap<>();
            extension.put("error", "Invalid username or password");
            return RestResult.buildFailure(extension);
        }
    }

    @GetMapping("/getById")
    @TokenListener
    public RestResult<User> uploadPicture(@RequestParam("userId") Long userId) {
        return RestResult.build(userService.selectByUserId(userId));
    }

    @PostMapping("/logout")
    public void logout(HttpServletRequest request, HttpServletResponse response) {
        // 清空当前用户的Token
        response.setHeader("Authorization", "");
        response.setStatus(HttpServletResponse.SC_OK);
    }
}

一切准备就绪，让我们来验证下功能是否达到预期吧。

哦吼~通过点击登录，可以发现并没有反应，一看控制台，提示前端访问后端跨域请求被阻止。这时候可能有人就疑问了，明明在控制层已经设置了@CrossOrigin(origins = "http://localhost:8080")，允许前端的跨域请求，可为何现在失效了呢？
在这里插入图片描述

4.3 Spring Security 的坑

其实，这是由于Spring Security引起的问题，当我们在项目集成了Spring Security功能后，基本会遇到一些常见的“坑”或需要注意的问题。比如说:

出现无法登录问题
静态资源请求被拦截
前端访问后端的请求被拦截
出现跨域问题
认证和授权逻辑混乱
角色和权限的误用

就比如上面跨域的情况，实际上是因为默认情况下，Spring Security启用了CSRF保护，所以在使用REST API时，可能就会导致问题。

要解决这个问题也很简单，可以根据具体情况决定是否禁用CSRF保护，或为特定API端点配置CSRF保护。这里我们定义了一个Spring Security配置类SecurityConfig，配置URL访问权限，允许特定路径或用户进行访问。同时启用CORS配置，允许来自特定域的请求，并允许所有HTTP方法和头部信息，同时允许发送Cookie。也在配置中明确允许访问静态资源。

package com.example.interestplfm.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

@Configuration
@EnableWebSecurity
public class SecurityConfig  extends WebSecurityConfigurerAdapter {


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable()
                .authorizeRequests()
                .antMatchers("/admin/**").hasRole("ADMIN")
                .antMatchers("/user/**").permitAll() // 所有以 /user/ 开头的路径都允许匿名访问
                .antMatchers("/upload/**").permitAll() // 所有以 /upload/ 开头的路径都允许匿名访问
                .antMatchers("/static/**").permitAll() // 允许静态资源访问
                .antMatchers("/css/**", "/js/**", "/image/**").permitAll() // 允许特定静态资源目录访问
                .anyRequest().authenticated()
                .and().formLogin()
                .and().logout()
                .logoutUrl("/logout"); // 配置注销URL
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("http://localhost:8080"); // 允许的前端域
        configuration.addAllowedMethod("*"); // 允许的HTTP方法
        configuration.addAllowedHeader("*"); // 允许的头部信息
        configuration.setAllowCredentials(true); // 允许发送Cookie

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

配置完后，我们再次验证下：可以发现，可以正常登录成功，且可以跳转到个人信息页面进行头像上传和用户信息展示，图片也正常显示，同时点击退出清空了Token后，直接通过输入URL路径请求接口的形式，会直接提示登录失败并回到登录页面。

至此，我们的预期效果已全部实现。
在这里插入图片描述

5. 总结

TOKEN鉴权校验作为一种行之有效的安全机制，确保了用户请求的合法性，为用户身份和权限验证提供了坚实的基础。通过使用JWT（JSON Web Tokens）加密用户信息，结合Spring Security进行细粒度的权限认证，我们可以为用户数据提供双重保障，从而实现更高级别的安全性。

Hardy Army

关注

32
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
功能性的安全性保障：TOKEN鉴权校验

在前文功能性的安全性保障：实现强制登录和密码加密功能中，我们已经讨论了功能性的安全性保障中的两个核心议题：身份验证和密码加密。所以在本文中，我们将继续从功能性的安全性保障这个话题展开，通过对概念的细致解读、实施策略的全面分析，以及实际代码实现的展示，深入讨论其中的另外一个核心议题：TOKEN鉴权校验。
复制链接

扫一扫

专栏目录