IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 若依RuoYi-Vue代码学习一---登录实现(验证码校验、token生成,token过滤【验证】) -> 正文阅读

[JavaScript知识库]若依RuoYi-Vue代码学习一---登录实现(验证码校验、token生成,token过滤【验证】)

一、验证码生成功能

  • 成果:
    在这里插入图片描述

  • 可以看出这个验证码主要是:这个图片的展示

代码位置com.ruoyi.web.controller.common.CaptchaController

@RestController
public class CaptchaController
{
    @Resource(name = "captchaProducer")
    private Producer captchaProducer;//验证码制作者

    @Resource(name = "captchaProducerMath")
    private Producer captchaProducerMath;//制作 数学计算 的验证码

    @Autowired
    private RedisCache redisCache;//redis缓存
    
    // 验证码类型
    @Value("${ruoyi.captchaType}")
    private String captchaType;//验证码类型
    
    @Autowired
    private ISysConfigService configService;//就用于判断验证码开关
    /**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        AjaxResult ajax = AjaxResult.success();//定义成功的返回结果
        boolean captchaOnOff = configService.selectCaptchaOnOff();//获取验证码开关
        ajax.put("captchaOnOff", captchaOnOff);
        if (!captchaOnOff)//开关:关着,直接返回
        {
            return ajax;
        }

        // 保存验证码信息
        String uuid = IdUtils.simpleUUID();//生成随机四位数
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;//验证密匙===验证码 redis key + uuid

        String capStr = null, code = null;
        BufferedImage image = null;//缓冲图像

        // 生成验证码
        if ("math".equals(captchaType))
        {
            String capText = captchaProducerMath.createText();//谷歌的验证码文本创建(展示问题@结果)9+8=?@17
            capStr = capText.substring(0, capText.lastIndexOf("@"));//问题
            code = capText.substring(capText.lastIndexOf("@") + 1);//结果
            image = captchaProducerMath.createImage(capStr);//根据问题创建图片
        }
        else if ("char".equals(captchaType))
        {
            capStr = code = captchaProducer.createText();//生成文本类的验证码
            image = captchaProducer.createImage(capStr);//创建验证码对应图片
        }
        /**设置验证码缓存
         * 验证密匙、code、验证码有效期(分钟)、时间颗粒度
         */
        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        // 转换流信息写出
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try
        {
            ImageIO.write(image, "jpg", os);//使用图像编写器(支持给定格式【渲染图像】)将图片写入输出流
        }
        catch (IOException e)
        {
            return AjaxResult.error(e.getMessage());
        }

        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(os.toByteArray()));//输出流转换为Base64
        return ajax;
    }
}

二、登录(校验验证码、token生成)

代码位置com.ruoyi.web.controller.system.SysLoginController

/**
     * 登录方法
     * 
     * @param loginBody 登录信息
     * @return 结果
     */
    @PostMapping("/login")
    public AjaxResult login(@RequestBody LoginBody loginBody)
    {
    	/**
         * 之前生成验证码的时候给了成功返回结果+uuid+图片
         * 现在请求对象loginBody把uuid放参数中带过来
         */
        AjaxResult ajax = AjaxResult.success();// 先准备一个成功返回{msg=操作成功, code=200}
        // 生成令牌
        //login()验证码校验、用户验证、登录日志、生成token
        String token = loginService.login(loginBody.getUsername(), loginBody.getPassword(), loginBody.getCode(),
                loginBody.getUuid());
        ajax.put(Constants.TOKEN, token);// 通过使用hashMap的方法给当前的AjaxResult对象,添加一个元素与值
        // {msg, code, token}
        return ajax;
    }
  • 这里看到这个login()方法,直接进去。
/**
     * 登录验证
     * 
     * @param username 用户名
     * @param password 密码
     * @param code 验证码
     * @param uuid 唯一标识
     * @return 结果
     */
    public String login(String username, String password, String code, String uuid)
    {
        boolean captchaOnOff = configService.selectCaptchaOnOff();
        // 验证码开关
        if (captchaOnOff)
        {   //校验验证码===>*********看下一个方法*******
            validateCaptcha(username, code, uuid);
        }
        // 用户验证
        Authentication authentication = null;
        try
        {
            // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
            authentication = authenticationManager
                    .authenticate(new UsernamePasswordAuthenticationToken(username, password));
            //UsernamePasswordAuthenticationToken [Principal=com.ruoyi.common.core.domain.model.LoginUser@748cc4df, Credentials=[PROTECTED], Authenticated=true, Details=null, Granted Authorities=[]]

        }
        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());
            }
        }
        //记录登录信息=====新增系统登录日志
        AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));

        LoginUser loginUser = (LoginUser) authentication.getPrincipal();//com.ruoyi.common.core.domain.model.LoginUser@748cc4df

        //记录登录信息=====修改用户基本信息(最后IP、时间)
        recordLoginInfo(loginUser.getUserId());
        // 生成token
        return tokenService.createToken(loginUser);
    }
  • 校验验证码validateCaptcha
/**
     * 校验验证码
     * 
     * @param username 用户名
     * @param code 验证码
     * @param uuid 唯一标识
     * @return 结果
     */
    public void validateCaptcha(String username, String code, String uuid)
    {
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;//验证码 redis key+uuid
        String captcha = redisCache.getCacheObject(verifyKey);//获取到redis中对应的验证码
        redisCache.deleteObject(verifyKey);//删除掉这条验证码
        if (captcha == null)
        {   //验证码不存在
            //异步的执行任务:recordLogininfor登录信息记录
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
            throw new CaptchaExpireException();
        }
        if (!code.equalsIgnoreCase(captcha))
        {   //code不等于验证码
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
            throw new CaptchaException();
        }
    }
  • token生成createToken
/**
     * 创建令牌
     *
     * @param loginUser 用户信息
     * @return 令牌
     */
    public String createToken(LoginUser loginUser)
    {
        String token = IdUtils.fastUUID();
        //设置token
        loginUser.setToken(token);
        //设置用户代理信息
        setUserAgent(loginUser);
        //刷新令牌有效期
        refreshToken(loginUser);

        Map<String, Object> claims = new HashMap<>();

        claims.put(Constants.LOGIN_USER_KEY, token);
        // claims这里只是令牌前缀
        return createToken(claims);
    }
//两个方法这里参数不同参数不同

/**
     * 从数据声明生成令牌
     *
     * @param claims 数据声明
     * @return 令牌
     */
    private String createToken(Map<String, Object> claims)
    {
    //JSON Web Token (JWT)就是一种Token的编码算法
        String token = Jwts.builder()
                .setClaims(claims)
                .signWith(SignatureAlgorithm.HS512, secret).compact();
         //至此,token生成
        return token;
    }

三、【认证】token过滤

代码位置com.ruoyi.framework.security.filter.JwtAuthenticationTokenFilter

/**
 * token过滤器 验证token有效性
 * 每个请求过滤器一次OncePerRequestFilter
 * @author ruoyi
 */
@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是否过期,相差不足20分钟,自动刷新缓存
             */
            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);
    }
}

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-23 12:15:16  更:2021-11-23 12:16:01 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/21 0:36:19-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码