Spring Security&前后端分离项目的使用

最新推荐文章于 2024-05-31 15:27:54 发布
最新推荐文章于 2024-05-31 15:27:54 发布
阅读量911 收藏 13
点赞数 3
分类专栏： 学习总结 文章标签： spring vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LeptoK/article/details/120710416
版权

整体思路

  1. 前端页面登录，绑定对象，发送axious到后端，进行验证
  2. 后端接收到前端的信息，此时密码为明文，而数据库中密码为密文，只能通过用户名查询数据库，判断用户是否存在，如果存在，通过BCryptPasswordEncoder对密码进行验证
  3. 验证密码通过后，查询用户的角色和权限信息，放到用户对象中，此时只需要字符串即可
  4. 通过私钥进行加密，颁发令牌到前端
  5. 前端接收到登录后的响应，判断是否成功登录，如果成功将token存在localstorage中，然后通过路由跳转页面到首页，登录操作完毕
  6. 此时访问其他资源会报403，因为springsecurity的上下文中并没有用户信息，用户角色和用户的权限，这个工作由springsecurity的FilterSecurityInterceptor这个过滤器来执行，我们需要在basicAuthenticationFilter这个过滤器生效时重写，验证token并将token中的用户信息放到springsecurity的上下文中
  7. 重写basicAuthenticationFilter时注意，此过滤器在FilterSecurityInterceptor之前，先要放行登录和验证请求，必须要return，使用SecurityContextHolder获取context上下文设置认证信息，这个认证信息需要UsernamepasswordAuthenticationToken对象利用构造方法创建，形参token中的载荷，null，authorities，其中的authorities通过AuthoritUtils中的commaSeparatedStringtoAuthorityList获取
  8. 前端发送请求时就需要将正确的token放到请求头中，后端验证之后方可访问资源，在vue的utils下的request.js中请求前从localstorage中获取token，然后设置到请求头中
  9. 此时如若token不正确或过期，无法访问资源，但依然会停留在访问页面，这样的用户体验不好，所以需要增加一个认证环节
  10. 后台认证：同样利用公钥解析请求头中的token，此过程无异常则表示token合法，正常返回一个ResultVO，需要注意的是：该认证的请求也需要在basicAuthenticationFilter和security配置类中放行
  11. 前端认证：在main.js中解开之前注释的permission组件，在permission.js中发送后台认证的请求，通过返回的数据判断token是否有效，有效则让原请求去访问资源，需要注意的是：要判断该请求是否是登录请求，若是登录请求可直接放行，访问登录页面，若token不合法就跳回登录页面

1. 登录认证，颁发令牌

  • 直接使用vue的index.vue界面，改变其中username和password的绑定
<el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.userName"
          placeholder="请输入用户名"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
  • 修改api，发送axious后端登录验证
import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}
  • 后端controller层
@PostMapping("login")
    @ApiOperation("用户登录")
    public ResultVO login(@RequestBody SysUser sysUser) {
        return userService.login(sysUser);
    }
  • 后端service层
@Override
    public ResultVO login(SysUser loginUser) {
        try {
            if (loginUser == null) {
                return new ResultVO(false, "用户名或密码不正确");
            }
            // 通过用户名查询用户是否存在，因为密码再数据库中是密文
            SysUser userInDB = userMapper.findUserByUserName(loginUser.getUserName());
            if (userInDB == null) {
                // 用户不存在
                return new ResultVO(false, "用户名或密码不正确");
            }
            // 用户存在,对比密码
            BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
            // 前一个参数是明文密码，后一个是数据库中的密文密码
            boolean matches = encoder.matches(loginUser.getPassword(), userInDB.getPassword());

            if (!matches) {
                // 密码不匹配
                return new ResultVO(false, "用户名或密码不正确");
            }
            // 密码匹配，颁发令牌
            // 1.获取用户的角色信息
            List<String> rolesList = userMapper.findRolesByUserId(String.valueOf(userInDB.getUserId()));
            String roles = "";
            // 遍历集合
            for (String roleName : rolesList) {
                roles += roleName + ",";
            }
            roles = roles.substring(0, roles.length() - 1);
            // 设置用户的角色信息
            userInDB.setRoles(roles);
            // 2.获取用户的权限信息
            List<String> permissionList = userMapper.findPermissionByUserId(userInDB.getUserId());
            String permissions = "";
            // 遍历集合
            for (String permissionName : permissionList) {
                permissions += permissionName + ",";
            }
            permissions = permissions.substring(0, permissions.length() - 1);
            // 设置用户的权限信息
            userInDB.setPermissions(permissions);
            // token载荷中不要放敏感信息
            userInDB.setPassword("");
            // 3.获取密钥
            PrivateKey privateKey = RsaUtils.getPrivateKey(ResourceUtils.getFile("classpath:rsa_pri").getPath());
            // 4. 颁发令牌
            String token = JwtUtils.generateTokenExpireInMinutes(userInDB, privateKey, 45);
            // 5. 没有异常正常返回
            return new ResultVO(true, "登录成功", token);
        } catch (Exception e) {
            e.printStackTrace();
            return new ResultVO(false, "令牌不合法！！！");
        }
    }
  • 后端mapper层
 // 通过用户名查询用户
    @Select("select * from sys_user where user_name = #{userName}")
    public SysUser findUserByUserName(String userName);

    //查询用户的角色信息
    @Select("SELECT role.role_name FROM sys_user_role sur " +
            "LEFT JOIN sys_role role ON sur.role_id = role.role_code " +
            "WHERE sur.user_id = #{userId}")
    public List<String> findRolesByUserId(String userId);

    // 查询用户权限信息
    @Select("SELECT per.perm_name FROM sys_user_role sur \n" +
            "LEFT JOIN sys_role_permission srp ON sur.role_id = srp.role_id\n" +
            "LEFT JOIN sys_permission per ON srp.perm_id = per.perm_code\n" +
            "WHERE sur.user_id = 1;")
    public List<String> findPermissionByUserId(Integer userId);

2. 配置信息

  • SpringSecurity的配置
@Configuration
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {

    // 放行静态资源
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers(
                "/swagger-ui.html/**","/css/**","/images/**","/plugins/**","/webjars/**",
                "/swagger-resources/**","/v2/**"
        );
    }

    // 放行系统资源
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                //登录请求必须放行
                .antMatchers("/user/login","/user/verify").permitAll()
                //除了以上资源，剩下的http资源都必须登录后才能访问
                .anyRequest().authenticated();

        //关闭ccrf过滤器
        http.csrf().disable();

        //解决跨域
        http.cors();

        http.addFilter(new MyBasicAuthenticationFilter(authenticationManager()));
    }
}
  • swagger2的配置，需要加入token
@Configuration
@EnableSwagger2
public class Swagger2Configuration {

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder().title("锋迷铺子运营平台接口文档")
                .description("锋迷铺子运营平台接口文档")
                .version("1.0.0")
                .build();
    }
    @Bean
    public Docket createRestApi(Environment environment) {

        Profiles profiles = Profiles.of("dev");

        boolean enable = environment.acceptsProfiles(profiles);

        //添加head参数start
        ParameterBuilder tokenPar = new ParameterBuilder();
        List<Parameter> pars = new ArrayList<Parameter>();
        tokenPar.name("token").description("令牌").modelRef(new ModelRef("string")).parameterType("header").required(false).build();
        pars.add(tokenPar.build());


        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .enable(enable)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.qf")) //这里写的是API接口所在的包位置
                .paths(PathSelectors.any())
                .build()
                .globalOperationParameters(pars);
    }

    private static List<ApiKey> unifiedAuth() {
        List<ApiKey> arrayList = new ArrayList();
        arrayList.add(new ApiKey("Authorization", "token", "header"));
        return arrayList;
    }

}

注意： 此时在登录之后，后端会给前端颁发一个令牌，此后的请求中，前端必须要携带这个令牌进行访问，而后端也需要验证令牌的正确性才能决定是否可以放行访问资源，下面需要做的就是认证的操作

3. 认证：后端操作

  • SpringSecurity中的BasicAuthenticationFilter就是做认证处理的

此过滤器在FilterSecurityInterceptor之前，所以需要先放行登录和认证的请求

此外,在认证之后需要将用户的信息，包括角色和权限都要放到springsecurity的上下文中，这样springsecurity才能起作用

public class MyBasicAuthenticationFilter extends BasicAuthenticationFilter {
    public MyBasicAuthenticationFilter(AuthenticationManager authenticationManager) {
        super(authenticationManager);
    }

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException {
        try {
            // 因该过滤器在前面，所以要前放行login
            String requestURI = request.getRequestURI();

            if ("/user/login".equals(requestURI)) {
                // 放行
                chain.doFilter(request, response);
                // 必须加return
                return;
            }
            // 从请求头中获取jwt令牌 约定key为token
            String token = request.getHeader("token");

            if (StringUtils.isEmpty(token)) {
                // 直接拦截，响应给客户端
                response(response, new ResultVO(false, "令牌不能为空"));
            }
            // token不为空，利用公钥解密token获取用户信息
            // 获取公钥
            PublicKey publicKey = RsaUtils.getPublicKey(ResourceUtils.getFile("classpath:rsa_pub").getPath());
            // 解密token
            SysUser info = (SysUser) JwtUtils.getInfoFromToken(token, publicKey, SysUser.class);
            // 获取用户的authorities
            String authority = info.getRoles() + "," + info.getPermissions();
            // 利用工具类获取
            List<GrantedAuthority> authorities = AuthorityUtils.commaSeparatedStringToAuthorityList(authority);

            UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken =
                    new UsernamePasswordAuthenticationToken(info, null, authorities);

            // 将用户的信息放到spring security的上下文中
            SecurityContextHolder.getContext().setAuthentication(usernamePasswordAuthenticationToken);

            // 放行
            chain.doFilter(request, response);
        } catch (Exception e) {
            e.printStackTrace();
            response(response,new ResultVO(false,"无效令牌!!!"));
        }


    }

    private void response(HttpServletResponse response, ResultVO res) {
        try {
            response.setContentType("application/json;charset=utf-8");
            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
            PrintWriter out = response.getWriter();

            out.write(JSONUtil.toJsonPrettyStr(res));
            out.flush();
            out.close();
        } catch (Exception e) {

        }

    }
}
  • 认证的配置
 // 放行系统资源
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                //登录请求必须放行
                .antMatchers("/user/login","/user/verify").permitAll()
                //除了以上资源，剩下的http资源都必须登录后才能访问
                .anyRequest().authenticated();

        //关闭ccrf过滤器
        http.csrf().disable();

        //解决跨域
        http.cors();
        
        // 此为配置我们自己写的basicAuthenticationFilter过滤器
        http.addFilter(new MyBasicAuthenticationFilter(authenticationManager()));

有了后端认证之后，前端发的请求中必须要携带正确的token才能访问资源

4.认证：前端操作

  • 每次请求需要将token加入到请求头中，并按照约定的key去设置token
//  请求拦截器
service.interceptors.request.use(
  config => {
    // 将token放入请求头中
    var tokenVal = localStorage.getItem('token')
    config.headers.token = tokenVal
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
  • 前端的请求实则是通过路由进行页面跳转，我们需要在permission.js中去修改拦截器，前提：在main.js中解开之前注释的permission组件
/**
 * 在路由跳转之前，要将token放到请求头中，后台才能做验证
 */
router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  verify().then(res => {
    if (!res.success) {
      if (to.path === '/login') {
        next()
      } else {
        // 跳回登录页面
        next(`/login?redirect=${to.path}`)
        NProgress.done()
      }
    } else {
      // 放行
      next()
    }
  })
})
冬门大官人
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring-Boot结合Security+JWT 简单实现前后端分离用户登录、授权案例
07-12
Spring-Security结合JWT 实现前后端分离完成权限验证功能案例，案例中，主要完成用户登录获取Token，通过Token访问Rest接口，没有权限或授权失败时返回JSON，前端根据状态码进行重新登录；案例中的用户名称： jake_j，密码：123。用户、角色、及菜单权限都是代码中指定的，未实现查询数据库相关数据。正常开发需要和现有系统数据库结合，这里只是简单说明整体用户认证、授权流程逻辑说明。 仓库地址：https://gitee.com/JakeRhino/spring-security-jwt-demo
axio高度封装，统一接口
12-31
axio高度封装，统一接口
基于springBoot+springSecurity+jwt实现前后端分离用户权限认证
12-09
主要基于前后端分离情况下用户权限认证, 当用户登录认证成功后，每个用户会获取到自己的token，在请求其他接口时只需携带token即可,后端会通过token来识别用户身份。springSecurity也有很多种权限认证方式，本项目主要实现基于接口授权，也就是说通过注解给controller赋予权限，用户只有拥有某个接口的权限才能成功访问这个接口，从而实现不同用户拥有不同访问权限;
Swagger 中 测试接口没Basic Authentication 验证的token输入框
chenwei0731的博客
11-21 2324
Swagger 中 测试接口没办法进行Basic Authentication 验证 之前搭建api结构 时 集成了下Basic Authentication 验证，然后为了方便测试又部署了Swagger，最开始的时候很正常，可以在Swagger 中测试接口，第二天，在想在Swagger中测试的时候token 输入框没了， 检测了下代码，发现没用加[AllowAnonymous]，所有的接口都没token输入框了，网上给的教程让在Swagger 顶部的位置输入token 测试了下，发现在顶部输入toke
【Spring Security】解答Spring Boot 中密码加密的正确方式?
讯开技术孵化器博客
05-24 797
Spring Boot 项目中密码如何加密 先说一句：密码是采用非对称加密是无法解密的。密码无法解密，还是为了确保系统安全。今天就来和大家聊一聊，密码要如何处理，才能在最大程度上确保我们的系统安全。密码加密我们一般会用到散列函数，又称散列算法、哈希函数，这是一种从任何数据中创建数字“指纹”的方法。 散列函数把消息或数据压缩成摘要，使得数据量变小，将数据的格式固定下来，然后将数据打乱混合，重新创建一个散列值。散列值通常用一个短的随机字母和数字组成的字符串来代表。好的散列函数在输入域中很少出现散列冲突。在散列表
springbootspringsecurity前后端分离（一个小demo）
08-21
一个小demo前后端分离的情况下给到前端是否跳转到登录页的标识符
SpringSecurity前后端分离
热门推荐
X_lsod的博客
02-13 1万+
SpringSecurity前后端分离 一、认证流程讲解 1、原始认证流程 原始认证流程通常会配合Session一起使用，但前后端分离后就用不到Session了 SpringSecurity默认的认证流程如下图（该图是B站UP主“三更草堂”讲SpringSecurity课程的图） DaoAuthenticationProvider继承AbstractUserDetailsAuthenticationProvider抽象类，而AbstractUserDetailsAuthenticationProvi
SpringBoot 2.x前后端分离项目中使用 SpringSecurity,自定义校验
qq_36174487的博客
09-06 414
demo git地址：传送门 一：前言 现在绝大部分都是前后端项目，在硬编码中，跳转到某一页面路径，显然不合适，所以应该是服务端返回JSON， 来告知前端是否登录，是否拥有页面权限，登录是否超时等，前端根据返回JSON约定值，来自由跳转。 二：具体实现 1、建立登录成功，失败，无权限等状态配置类 AccessDeniedHandlerConfig （无权限） @Component public...
Spring Security 前后端分离
Markix的博客
11-14 3157
前后端分离指的就是前后端分离部署，前端 调用后端API，后端 返回 JSON格式数据，页面是由前端渲染并展示到浏览器中。Spring Security 涉及到的扩展点： 登录成功处理：AuthenticationSuccessHandler 登录失败处理：AuthenticationFailureHandler 登出成功处理：LogoutSuccessHandler 未登录处理：AuthenticationEntryPoint 鉴权失败处理：AccessDeniedHandler
spring security前后端分离
YMY_666的博客
01-20 768
前后端分离，配置所有接口以及权限放行以及跨域和csrf拦截等 @Override protected void configure(HttpSecurity http) throws Exception { //使用自定义表单登录 http.formLogin() //未登录返回json .loginPage("/unLogin") //登录url
springboot项目——基于springSecurity实现的前后端分离的企业级人事管理系统
10-03
此项目是采用springboot与springSecurity开发的人事管理系统，前端采用vue，是一个前后端分离的项目
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题
10-12
转载他人 https://blog.csdn.net/u012702547/article/details/79010010 https://blog.csdn.net/u012702547/article/details/79019510
SpringBoot_SpringSecurity:前后端分离登陆拦截设计
05-01
SpringBoot_SpringSecurity
前后端交互ajax和axios入门讲解，以及http与服务器基础
qq_45793481的博客
09-25 1141
前后端交互（从入门到实践详细解析） 文章目录前后端交互（从入门到实践详细解析）前言一、Ajax和HTTP1.1 客户端和服务器1.2 URL地址1.3 服务器和客户端的通信过程1.4 什么是Ajax1.5 jQuery中的Ajax1.6 接口总结 前言 学着一段时间的前端，发现做项目的话如果没有后端服务器相关的知识概念的话很难做好并理解一个项目，一个完整的项目时时刻刻都在用到着前后端交互的内容，例如node，ajax和http，npm等等。之前看到或者听到这些东西都是懵懵懂懂，所以近段时间特意去学习了下
Axios使用拦截器处理token
m0_51433562的博客
08-11 616
请求拦截器 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。 Axios.interceptors.request.use(config => { console.log(localStorage.getItem("token")) //若存在这样的token，则从本地存储取出 if (localStorage.token) { config.headers.Authorization = lo
【SpringSecurity】BCrypt密码加密和解密 一文学会使用BCryptPasswordEncoder
m0_67390379的博客
07-31 1万+
深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。BCrypt就是一款加密工具，可以比较方便地实现数据的加密工作。例如，使用MD5加密，每次加密后的密文其实都是一样的，这样就方便了MD5通过大数据的方式进行破解。BCrypt生成的密文是60位的，而MD5的是32位的。...
spring security简单教程以及实现完全前后端分离
wshyb0314的博客
02-15 659
比如 设置登录页（formLogin().loginPage("/login.html")） 可以设置自己的登录页（该设置主要是针对使用302跳转，且有自己的登录页，如果不使用302跳转，前后端完全分离，无需设置）。设置完成登录成功和失败处理后，还是不够满足需求，当用户未通过登录页进入网站，我们需要在用户直接访问资源时，告诉前端此用户未认证。事实上只要继承WebSecurityConfigurerAdapter ，spring security就已经启用了，当你访问资源时，它就会跳转到它自己默认的登录页。
springboot基本使用十二（PageHelper分页查询）
最新发布
weixin_41670405的博客
05-31 379
startPage(page,pageSize)方法进行分页查询，这个方法需要传入两个参数，第一个参数为页码（page自定义名称），第二个为每页的数量（pageSize自定义名称）分页查询还得到数据总量。
spring security整合前后端分离项目
02-21
在前后端分离的项目中，Spring Security可以用于实现用户认证和授权功能。 下面是Spring Security整合前后端分离项目的一般步骤： 1. 添加依赖：在项目的构建文件中添加Spring Security的依赖，例如使用Maven的话...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值