Springboot Vue实现单点登陆功能示例详解

目录
  • 正文
    • 简单上个图
  • 先分析下登陆要做啥
    • 怎么落实?
  • 上代码
    • 接口:
    • token生成部分
    • 刷新token
    • 验证token

正文

登陆是系统最基础的功能之一。这么长时间了,一直在写业务,这个基础功能反而没怎么好好研究,都忘差不多了。今天没事儿就来撸一下。

以目前在接触和学习的一个开源系统为例,来分析一下登陆该怎么做。代码的话我就直接CV了。

简单上个图

(有水印。因为穷所以没开会员)

先分析下登陆要做啥

首先,搞清楚要做什么。

登陆了,系统就知道这是谁,他有什么权限,可以给他开放些什么业务功能,他能看到些什么菜单?。。。这是这个功能的目的和存在的意义。

怎么落实?

怎么实现它?用什么实现?

我们的项目是Springboot + Vue前后端分离类型的。

选择用token + redis 实现,权限的话用SpringSecurity来做。

前后端分离避不开的一个问题就是单点登陆,单点登陆咱们有很多实现方式:CAS中央认证、JWT、token等,咱们这种方式其实本身就是基于token的一个单点登陆的实现方案。

单点登陆我们改天整理一篇OAuth2.0的实现方式,今天不搞这个。

上代码

概念这个东西越说越玄。咱们直接上代码吧。

接口:

@PostMapping("/login")
public AjaxResult login(@RequestBody LoginBody loginBody)
{
    AjaxResult ajax = AjaxResult.success();
    // 生成令牌
    //用户名、密码、验证码、uuid
    String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
                                      loginBody.getUuid());
    ajax.put(Constants.TOKEN, token);
    return ajax;
}

用户信息验证交给SpringSecurity

/**
* 登录验证
*/
public String login(String username, String password, String code, String uuid)
{
    // 验证码开关,顺便说一下,系统配置相关的开关之类都缓存在redis里,系统启动的时候加载进来的。这一块儿的代码就不贴出来了
    boolean captchaEnabled = configService.selectCaptchaEnabled();
    if (captchaEnabled)
    {
        //uuid是验证码的redis key,登陆页加载的时候验证码生成接口返回的
        validateCaptcha(username, code, uuid);
    }
    // 用户验证 -- SpringSecurity
    Authentication authentication = null;
    try
    {
        UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(username, password);
        AuthenticationContextHolder.setContext(authenticationToken);
        // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername。
        //
        authentication = authenticationManager.authenticate(authenticationToken);
    }
    catch (Exception e)
    {
        if (e instanceof BadCredentialsException)
        {
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
            throw new UserPasswordNotMatchException();
        }
        else
        {
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage()));
            throw new ServiceException(e.getMessage());
        }
    }
    finally
    {
        AuthenticationContextHolder.clearContext();
    }
    AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
    LoginUser loginUser = (LoginUser) authentication.getPrincipal();
    recordLoginInfo(loginUser.getUserId());
    // 生成token
    return tokenService.createToken(loginUser);
}

把校验验证码的部分贴出来,看看大概的逻辑(这个代码封装得太碎了。。。没全整出来)

/**
 * 校验验证码
 */
public void validateCaptcha(String username, String code, String uuid)
{
    //uuid是验证码的redis key
    String verifyKey = CacheConstants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, ""); //String CAPTCHA_CODE_KEY = "captcha_codes:";
    String captcha = redisCache.getCacheObject(verifyKey);
    redisCache.deleteObject(verifyKey);
    if (captcha == null)
    {
        AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
        throw new CaptchaExpireException();
    }
    if (!code.equalsIgnoreCase(captcha))
    {
        AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
        throw new CaptchaException();
    }
}

token生成部分

这里,token

/**
 * 创建令牌
 */
public String createToken(LoginUser loginUser)
{
    String token = IdUtils.fastUUID();
    loginUser.setToken(token);
    setUserAgent(loginUser);
    refreshToken(loginUser);
    Map<String, Object> claims = new HashMap<>();
    claims.put(Constants.LOGIN_USER_KEY, token);
    return createToken(claims);
}

刷新token

/**
 * 刷新令牌
 */
public void refreshToken(LoginUser loginUser)
{
    loginUser.setLoginTime(System.currentTimeMillis());
    loginUser.setExpireTime(loginUser.getLoginTime() + expireTime * MILLIS_MINUTE);
    // 根据uuid将loginUser缓存
    String userKey = getTokenKey(loginUser.getToken());
    redisCache.setCacheObject(userKey, loginUser, expireTime, TimeUnit.MINUTES);
}

验证token

/**
 * 验证令牌
 */
public void verifyToken(LoginUser loginUser)
{
    long expireTime = loginUser.getExpireTime();
    long currentTime = System.currentTimeMillis();
    if (expireTime - currentTime <= MILLIS_MINUTE_TEN)
    {
        refreshToken(loginUser);
    }
}

注意这里返回给前端的token其实用JWT加密了一下,SpringSecurity的过滤器里有进行解析。

另外,鉴权时会刷新token有效期,看下面第二个代码块的注释。

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception
{
    //...无关的代码删了
    httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
}
@Component
public class JwtAuthenticationTokenFilter extends OncePerRequestFilter
{
    @Autowired
    private TokenService tokenService;
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
        throws ServletException, IOException
    {
        LoginUser loginUser = tokenService.getLoginUser(request);
        if (StringUtils.isNotNull(loginUser) && StringUtils.isNull(SecurityUtils.getAuthentication()))
        {
            //刷新token有效期
            tokenService.verifyToken(loginUser);
            UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(loginUser, null, loginUser.getAuthorities());
            authenticationToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
            SecurityContextHolder.getContext().setAuthentication(authenticationToken);
        }
        chain.doFilter(request, response);
    }
}

这个登陆方案里用了token + redis,还有JWT,其实用哪一种方案都可以独立实现,并且两种方案都可以用来做单点登陆。

这里JWT只是起到个加密的作用,无它。

以上就是Springboot Vue实现单点登陆功能示例详解的详细内容,更多关于Springboot Vue单点登陆的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue3+springboot部署到Windows服务器的详细步骤

    目录 前言 一.准备工作 二.使用步骤 1.vue部署 2.mysql部署 3.配置Nginx 4.后端部署 总结 前言 提示:这里可以添加本文要记录的大概内容: 参考网上将项目部署到服务器,这里只介绍简单部署的方式. 提示:以下是本篇文章正文内容,下面案例可供参考 一.准备工作 (1) 安装Nginx —— 用于部署vue(2) 安装mysql —— 数据库(3)安装jdk(4) 部署springboot项目 二.使用步骤 1.vue部署 打包vue项目 将dist文件夹拷贝到Nginx的安装

  • Vue3+Spring Framework框架开发实战

    目录 引言 一.环境搭建 二.创建Vue3组件 三.创建Spring控制器 四.配置Spring项目 五.使用Vue3组件和Spring控制器 六.结论 引言 Vue3是最新版的Vue框架,它与Spring Framework结合使用可以帮助我们构建强大的Web应用程序.在本文中,我们将介绍如何使用Vue3和Spring Framework进行开发,并提供代码示例. 一.环境搭建 首先,我们需要在计算机上安装Node.js和Java JDK.然后,我们可以使用Vue CLI创建Vue3项目: r

  • SpringBoot+Vue实现EasyPOI导入导出的方法详解

    目录 前言 一.为什么做导入导出 二.什么是 EasyPOI 三.项目简介 项目需求 效果图 开发环境 四.实战开发 核心源码 前端页面 后端核心实现 五.项目源码 小结 前言 Hello~ ,前后端分离系列和大家见面了,秉着能够学到知识,学会知识,学懂知识的理念去学习,深入理解技术! 项目开发过程中,很大的需求都有 导入导出功能,我们依照此功能,来实现并还原真实企业开发中的实现思路 一.为什么做导入导出 为什么做导入导出 导入 在项目开发过程中,总会有一些统一的操作,例如插入数据,系统支持单个

  • 使用SpringBoot+EasyExcel+Vue实现excel表格的导入和导出详解

    目录 一.导入和导出 二.导出数据为excel实现过程 三.将excel中的数据导入到数据库中 一.导入和导出 导入:通过解析excel表格中的数据,然后将数据放到一个集合中,接着通过对持久层操作,将数据插入到数据库中,再加载一下页面,从而实现了数据的导入 导出:导出也是直接对数据库进行操作,获取数据库中所有的数据,将其存储在一个集中,接着使用查询出来的的数据生成一个excel表格 其中导入和导出的功能实现都是基于EasyExcel实现的 EasyExcel是阿里巴巴开源的一个基于Java的简单

  • Springboot Vue可配置调度任务实现示例详解

    目录 正文 1.表结构: 2.接口: 3.业务层: 4.Mapper 5.前端(Vue): 正文 Springboot + Vue,定时任务调度的全套实现方案. 这里用了quartz这个框架,实现分布式调度任务很不错,关于quarz的使用方式改天补一篇.相当简单. 1.表结构: sys_job 列名 数据类型 长度 是否可空 是否主键 说明 job_id bigint 否 是 任务ID job_name varchar 64 否 是 任务名称 job_group varchar 64 否 是 任

  • SpringBoot+Vue3实现文件的上传和下载功能

    目录 前言 上传前端页面 上传后端代码 下载后端代码 总结 参考文献 前言 上传文件和下载文件是我们平时经常用到的功能,接下来就让我们用SpringBoot,Vue3和ElementPlus组件实现文件的上传和下载功能吧~ 上传前端页面 前端页面我们可以使用ElementPlus框架的el-upload组件完成上传,主要的参数解释如下: action属性:指定请求的url onsuccess属性: 请求成功后的回调函数 我们可以使用axios向后端发起get请求,然后后端返回文件保存的位置 表单

  • Springboot Vue实现单点登陆功能示例详解

    目录 正文 简单上个图 先分析下登陆要做啥 怎么落实? 上代码 接口: token生成部分 刷新token 验证token 正文 登陆是系统最基础的功能之一.这么长时间了,一直在写业务,这个基础功能反而没怎么好好研究,都忘差不多了.今天没事儿就来撸一下. 以目前在接触和学习的一个开源系统为例,来分析一下登陆该怎么做.代码的话我就直接CV了. 简单上个图 (有水印.因为穷所以没开会员) 先分析下登陆要做啥 首先,搞清楚要做什么. 登陆了,系统就知道这是谁,他有什么权限,可以给他开放些什么业务功能,

  • vue+three.js实现炫酷的3D登陆页面示例详解

    目录 前言: Three.js的基础知识 关于场景 关于光源 关于相机(重要) 关于渲染器 完善效果 创建一个左上角的地球 使地球自转 创建星星 使星星运动 创建云以及运动轨迹 使云运动 完成three.js有关效果 结语 前言: 大家好,我是xx传媒严导(xx这两个字请自行脑补) . 该篇文章用到的主要技术:vue3.three.js 我们先看看成品效果: 高清大图预览(会有些慢): 座机小图预览: 废话不多说,直接进入正题 Three.js的基础知识 想象一下,在一个虚拟的3D世界中都需要什

  • vue 之 .sync 修饰符示例详解

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行"双向绑定". 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值. 这很方便,但也会导致问题,因为它破坏了单向数据流.(数据自上而下流,事件自下而上走) 由于子组件改变 prop 的代码和普通的状体改动代码毫无区别,所以当你光看子组件的代码时,你完全不知道它合适悄悄地改变了父组件的状态. 这在 debug 复杂

  • Vue项目接入Paypal实现示例详解

    一.支付流程 在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验. 二.实现方案 接入方式 优点 缺点 相关资料 在html中插入paypal的script脚本 实现方式比较简单 1.安全性问题:公司的client_id会暴露在代码中 2.引用的按钮样式比较难自定义 官方文档:https://developer.paypal.com/docs/checkout/integr

  • vue 实现滑动块解锁示例详解

    目录 引言 下载需要用到的组件库 书写登录页面 template 结构: script 逻辑: style 样式: 登录页面效果展示: 写滑动解锁组件 template 模板: script 代码: style 样式: 将滑动组件运用到我们的 Login 组件中: 补充逻辑代码 最终效果: 引言 从0开始,写一个登录滑动解锁的功能. 首先,新创建一个 vue 项目. 或者在已有的项目写也可以. 将无用的代码删一下. 下载需要用到的组件库 1.下载 element-ui. yarn add ele

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • vue选项卡Tabs组件实现示例详解

    目录 概述 效果图 实现过程 组件分析 所需的前置知识 项目组件文件夹 Tabs.vue TabPane.vue render.js index.js 使用 总结 概述 前端项目中,多数页面涉及到选项卡切换,包括路由切换,指令v-if等,本质上其实和选项卡切换思想差不多,如果是个简单的选项卡,还是很简单的,我们也不需要什么组件库的组件,自己也能几行代码写出来,但是涉及到动画,尺寸计算,拖拽的功能的时候,多数情况下,自己写还是要花点时间的,组件库就提供了现成的,拿来改改样式就行,为了对这个组件更加

  • vue组合式API浅显入门示例详解

    目录 正文 组合式API setup 变量声明 目前比起选项式API的优点 生命周期 正文 在react推出了hook之后,vue也在vue3里面添加了组合式API,鉴于这个时间间隔,我有理由认为组合式api和hook还是有一些关系的.不过在我具体的使用中,我并没发现这两个方法太多的相同点,不过鉴于vue自动发布之后就与react之间那剪不断理还乱的量子力学关系,估计会有很多人会问及这俩之间的异同.我还没到能分辨出异同的地步,就简单的介绍一下vue的组合式API吧. 组合式API 在vue3.0

  • SpringBoot 集成Kaptcha实现验证码功能实例详解

    在一个web应用中验证码是一个常见的元素.不管是防止机器人还是爬虫都有一定的作用,我们是自己编写生产验证码的工具类,也可以使用一些比较方便的验证码工具.在网上收集一些资料之后,今天给大家介绍一下kaptcha的和springboot一起使用的简单例子. 准备工作: 1.你要有一个springboot的hello world的工程,并能正常运行. 2.导入kaptcha的maven: <!-- https://mvnrepository.com/artifact/com.github.penggl

  • Vue响应式原理的示例详解

    Vue 最独特的特性之一,是非侵入式的响应系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.聊到 Vue 响应式实现原理,众多开发者都知道实现的关键在于利用 Object.defineProperty , 但具体又是如何实现的呢,今天我们来一探究竟. 为了通俗易懂,我们还是从一个小的示例开始: <body> <div id="app"> {{ message }} </div> <script> v

随机推荐