Spring Cloud + Vue前后端分离-第11章 用户管理与登录

 源代码在GitHub - 629y/course: Spring Cloud + Vue前后端分离-在线课程

Spring Cloud + Vue前后端分离-第11章 用户管理与登录

11-1 增加用户管理功能

用户表设计与基本代码生成

1.用户管理与登录:用户表设计与基本代码生成

all.sql

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第1张图片

generatorConfig.xml

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第2张图片

ServerGenerator.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第3张图片

VueGenerator.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第4张图片

admin.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第5张图片

router.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第6张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第7张图片

增加用户名是否已存在校验

1.用户管理与登录:增加用户名是否已存在校验

2.增加自定义业务异常

登录名是不可编辑的,登录名一般会跟其它表有关联,一旦登录名改了,这些关联信息就没有了

UserService.java

根据传入登录名到数据库中查找是否有记录,有记录就说明用户名已经存在

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第8张图片

loginName 是唯一的,所以查出来要么没有记录,要么只有一条记录

我们要的功能是校验用户名是否存在,所以也可以把返回值改成true或false,而不是返回User对象,但是这种写法不够通用,所以我们选择返回User。

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第9张图片

BusinessException.java

抛出业务异常时,不打印堆栈信息,一方面是提高性能,另一方面是没有业务异常没必要看堆栈信息

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第10张图片

继承RuntimeException的一个好处就是代码不需要捕获,如果是直接继承Exception,代码需要捕获,否则编译不通过。

BusinessExceptionCode.java

大家也可以自己把code加上,定义一套异常码

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第11张图片

ControllerExceptionHandler.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第12张图片

user.vue

aria-*的属性主要用于一些读屏设备,方便残障人士使用,比如盲人

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第13张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第14张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第15张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第16张图片

这里打印的异常不会打印出堆栈信息,我们之前把堆栈的打印重写了

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第17张图片

使用方法:

1.在BusinessExceptionCode.java增加一种异常枚举;

2.在业务代码中抛出指定枚举类型的业务异常

侧边栏激活样式优化

1.用户管理与登录:侧边栏激活样式优化

当前菜单的父菜单的同级菜单,下面所有的子菜单,清空激活样式

admin.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第18张图片

可以把active清空掉

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第19张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第20张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第21张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第22张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第23张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第24张图片

随便切换都没有问题

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第25张图片

问题:访问跟目录时,页面显示的是admin.vue,但是右边的content部分是空的,没有路由到任何一个子路由

router.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第26张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第27张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第28张图片

解决从登录页面跳到控台主页时,侧边栏失效的问题

1.用户管理与登录:解决从登录页面跳到控台主页时,侧边栏失效的问题

问题:从登录页面跳转到控台主页时,菜单失效了

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第29张图片

重新刷新,才会显示

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第30张图片

打开登录页面时,会去加载所需的js,包括ace.min.js,这里会去做很多的初始化,包括侧边栏的点击事件,但是此时还没有侧边栏

解决方法:进入控台主页时,重新加载ace.min.js

admin.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第31张图片

测试成功,登录进来就可以点击出现子模块了

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第32张图片

小提示:大家在用很多第三方框架或jquery插件时,如果发现有些功能不起作用,如果看不懂源码,可以尝试这种方法解决,把核心的js重新加载一遍 

11-2 密码的加密传输与加密存储

加密算法MD5与盐值

网站的数据库里已经把原值和密文都算好并存储起来了,如果刚好你输入的密文在数据库里有,就能解(查)出来。

盐值也叫salt值,加上盐值后,密文不容易被破解(查询)。

密码加密传输和加密存储

1.用户管理与登录:密码加密传输和加密存储

存成明文的话,至少程序员可以直接到生产上看到所有人的密码。

从路由器的日志,我可以看到所有人浏览的网站的地址、用户名、密码,如果密码刚好是明文传输,那就泄露了,如果是简单的md5,也很容易被破解,所以需要加个盐值。

md5.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第33张图片

盐值可以是随机的一串值,但是所有用到盐值的地方必须是同一个值。如果你是做平台系统,有多个客户用你的平台,最好是一个客户一个盐值。

user.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第34张图片

这里可以考虑写个通用方法,把hex_md5+盐值包装起来

保险方案:对密码做两层加密

UserController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第35张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第36张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第37张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第38张图片

增加修改密码功能

1.用户管理与登录:增加重置密码功能;编辑用户信息的时候不修改密码

修改用户信息和修改密码应该分开,做成两个功能

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第39张图片

密码发生改变

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第40张图片

user.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第41张图片

UserService.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第42张图片

UserMapper.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第43张图片 UserMapper.xml

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第44张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第45张图片

mybatis-generator 生成的方法里,updateByPrimaryKeySelective会对字段进行非空判断,再更新,如果值为空就不更新,原理就是利用mybatis的if拼成动态sql

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第46张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第47张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第48张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第49张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第50张图片

user.vueSpring Cloud + Vue前后端分离-第11章 用户管理与登录_第51张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第52张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第53张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第54张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第55张图片

UserService.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第56张图片

UserController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第57张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第58张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第59张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第60张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第61张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第62张图片

11-3基本的登录功能开发

基本的登录功能开发

1.用户管理与登录:基本的登录功能开发,校验用户名密码

思考:我现在存到数据库里面的密码是密文,那用户登录的时候,我数据库里面的密码解密不出来了,我怎么知道用户输入的密码对不对?

login.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第63张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第64张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第65张图片

UserController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第66张图片

UserService.java

登录验证思考:是否是根据用户名+密码到数据中去查找记录?

用户名+密码去数据库查找的话,程序不知道是用户名不对,还是密码不对。程序应该要能知道,比如我如果发现有大量的用户名不对的报错,说明有人正在不断的探测我系统的用户名。

再次思考:如果用户名不对,提示给前端的是:用户名不存在。如果是密码不对,提示给前端的是:密码不对。是否是这样?

如果你直接告诉前端说用户名不存在,我作为一个黑客的话,可以拿着现成的一堆用户名,包括手机号邮箱,不断的探测哪些用户名是你系统里有了,不要给别人任何机会获取你系统的关键信息。

BusinessExceptionCode.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第67张图片

LoginUserDto.java

package com.course.server.dto;


public class LoginUserDto {

    /**
    * id
    */
    private String id;

    /**
    * 登录名
    */
    private String loginName;

    /**
    * 昵称
    */
    private String name;
    

    public String getId() {
    return id;
    }

    public void setId(String id) {
    this.id = id;
    }

    public String getLoginName() {
    return loginName;
    }

    public void setLoginName(String loginName) {
    this.loginName = loginName;
    }

    public String getName() {
    return name;
    }

    public void setName(String name) {
    this.name = name;
    }
    
    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append(getClass().getSimpleName());
        sb.append(" [");
        sb.append("Hash = ").append(hashCode());
        sb.append(", id=").append(id);
        sb.append(", loginName=").append(loginName);
        sb.append(", name=").append(name);
        sb.append("]");
        return sb.toString();
    }
}

UserService.java 

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第68张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第69张图片

UserController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第70张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第71张图片

登录后保存登录信息

1.用户管理与登录:登录后前端保存登录信息并显示

前端的信息保存有多种选择:h5的localStorage, sessionStorage; js的全局变量,vue 的store等。

sessionStorage在页面刷新的时候,信息不会丢;关闭页面后,信息自动清空,适合用来存储登录信息。

localStorage在关闭页面后,登录信息还是在的,适合一些内网使用的系统保存登录信息。

用js 全局变量或vue 的store,刷新浏览器的时候,信息会丢失。

login.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第72张图片

admin.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第73张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第74张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第75张图片

把登录信息的保存和读取做成通用的方法。

tool.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第76张图片

小技巧:在获取一些对象的时候,加上|| {},避免获取属性值时报错。

session-storage.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第77张图片

login.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第78张图片

admin.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第79张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第80张图片

11-4 退出登录与记住登录

增加退出登录功能

1.用户管理与登录:增加退出登录功能,清空前后端的会话缓存

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第81张图片

它会动态的改变大小,适应屏幕

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第82张图片

退出登录:清空当前登录的缓存信息,并跳到登录页面

admin.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第83张图片

一般登录信息在前后端都会保存

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第84张图片

Constants.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第85张图片

UserController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第86张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第87张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第88张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第89张图片

增加记住登录信息功能

1.用户管理与登录:增加记住登录信息功能

使用localStorage来保存输入的用户名密码

login.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第90张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第91张图片

能获取到缓存的值,说明上一次有勾选“记住我” 

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第92张图片

如果不清空本地缓存,重新打开页面时,会再次显示记住的用户名密码

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第93张图片

测试之前要把浏览器自带的记住用户名密码清除

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第94张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第95张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第96张图片

安全加固,本地缓存保存密码密文

1.用户管理与登录:增加记住登录信息功能,安全加固,本地缓存保存密码密文

local-storage.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第97张图片

login.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第98张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第99张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第100张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第101张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第102张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第103张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第104张图片

从刚才的记住我这个功能,大家可以看出来,一个是记住明文,一个是记住密文,虽然实现的功能是一样的,但是安全性上不一样,所以我们写程序不只是把功能写出来,还要严谨,不要留下坑

11-5 增加登录图形验证码

集成图形验证码kaptcha

1.用户管理与登录:集成图形验证码kaptcha

pom.xml(course)

pom.xml(server)

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第105张图片

KaptchaConfig.java

package com.course.server.config;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import com.google.code.kaptcha.util.Config;

import java.util.Properties;

@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.setProperty("kaptcha.border", "no");
//        properties.setProperty("kaptcha.border.color", "105,179,90");
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        properties.setProperty("kaptcha.image.width", "90");
        properties.setProperty("kaptcha.image.height", "32");
        properties.setProperty("kaptcha.textproducer.font.size", "24");
        properties.setProperty("kaptcha.session.key", "code");
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.textproducer.font.names", "Arial");
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

    //如果项目中有多个页面会用到验证码图片,且图片的大小,颜色等都不一样,就可以增加多个生成验证码图片方法
    @Bean
    public DefaultKaptcha getWebKaptcha() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.setProperty("kaptcha.border", "no");
//        properties.setProperty("kaptcha.border.color", "105,179,90");
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        properties.setProperty("kaptcha.image.width", "90");
        properties.setProperty("kaptcha.image.height", "45");
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        properties.setProperty("kaptcha.session.key", "code");
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.textproducer.font.names", "Arial");
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

如果项目中有多个页面会用到验证码图片,且图片的大小,颜色等都不一样,就可以增加多个生成验证码图片方法

KaptchaController.java

package com.course.system.controller.admin;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;

@RestController
@RequestMapping("/admin/kaptcha")
public class KaptchaController {

    @Qualifier("getDefaultKaptcha")
    @Autowired
    DefaultKaptcha defaultKaptcha;

    @GetMapping("/image-code/{imageCodeToken}")
    public void imageCode(@PathVariable(value = "imageCodeToken") String imageCodeToken,
    HttpServletRequest request, HttpServletResponse httpServletResponse) throws Exception{
        ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
        try {
            // 生成验证码字符串
            String createText = defaultKaptcha.createText();

            // 将生成的验证码放入会话缓存中,后续验证的时候用到
            request.getSession().setAttribute(imageCodeToken, createText);

            // 使用验证码字符串生成验证码图片
            BufferedImage challenge = defaultKaptcha.createImage(createText);
            ImageIO.write(challenge, "jpg", jpegOutputStream);
        } catch (IllegalArgumentException e) {
            httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        // 定义response输出类型为image/jpeg类型,使用response输出流输出图片的byte数组
        byte[] captchaChallengeAsJpeg = jpegOutputStream.toByteArray();
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/jpeg");
        ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
        responseOutputStream.write(captchaChallengeAsJpeg);
        responseOutputStream.flush();
        responseOutputStream.close();
    }
}

测试http://localhost:9000/system/admin/kaptcha/image-code/123

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第106张图片

alt+enter,将字符加到字典里,就不会有波浪线警告了 

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第107张图片

页面显示验证码及刷新验证码

1.用户管理与登录:页面显示验证码及刷新验证码

login.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第108张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第109张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第110张图片

tool.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第111张图片

radix 默认63
10个数字+26个大小字母+26个小写字母,共62个字符,可以用来表示62进制的数值,也可以加入一些特殊字符,组成更大进制的数。
原理:以62进制为例,随机生成一个0~61的数值,比如41,那边就取chars数组中的第41个字符,这样重复做8遍,就生成了8位的62进制数,重复的概览是62的8次方。也可以生成更长的数值。

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第112张图片

登录增加验证码校验

1.用户管理与登录:登录增加验证码校验

2.解决每次ajax请求,对应的sessionId不一致的问题

UserDto.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第113张图片

增加属性后,记得alt+insert生成get, set, toString()方法。比如lombok,代码侵入性太强,如果我用了插件,那大家都得安装这个插件,否则会报错。

UserController.java

在登录里面,增加验证码校验:通过token去缓存中获取验证码字符串,并和用户输入的字符串做比较。

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第114张图片

main.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第115张图片

登录验证出错时,将密码清空,同时刷新验证码图片 

login.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第116张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第117张图片 

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第118张图片 

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第119张图片

测试

刷新验证码会让网站更安全,但是会牺牲一点用户体验,需要折中选择

测试一种场景:刷新过的验证码,还能不能用。

正规的项目中,都会有专门的测试团队来编写测试用例。如果是个人开发,只能自己设计测试用例,要尽可能的覆盖各种使用场景

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第120张图片

11-6 单点登录功能开发

单点登录解决方案介绍

生产发布时,至少是双节点,防止单台宕机。

不管是在哪一台做的登录,登录完成后,会把登录信息保存到redis中。当业务请求进来时,再到redis中获取登录信息,能获取到就表示已登录,未获取到就表示未登录,拦截掉请求。

功能:只要在其中一个产品中登录过,其他关联的产品都不需要再登录。

token:登录标识,每个用户每次登录,都会生成不同的token。

单点登录(Single Sign On),简称为SSO,核心功能:session共享。

需要解决Session共享的场景:

1.同个应用多节点共享登录信息;

2.多个项目间共享登录信息。

一般我们通常说的单点登录系统,是用来解决场景2的。

集成redis

1.用户管理与登录:集成redis,图片验证码的存储从session改为redis

pom.xml(server)

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第121张图片

application.properties

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第122张图片

KaptchaController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第123张图片

UserController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第124张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第125张图片

回归验证码功能,更换缓存不要对原有流程产生影响

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第126张图片

生成登录token并存储到redis中

1.用户管理与登录:生成登录token并存储到redis中,退出登录时删除token

LoginUserDto.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第127张图片

UserController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第128张图片

这里也可以直接保存loginUserDto对象,但是需要序列化。如果是跨应用使用的,比如A应用存,B应用取,一般会把值转成JSON字符串

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第129张图片

admin.vue

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第130张图片

KaptchaController.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第131张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第132张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第133张图片

11-7 前后端登录拦截

基于Vue路由的登录拦截

1.用户管理与登录:基于Vue路由的登录拦截

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第134张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第135张图片

此时,直接访问user页面,是可以直接跳过身份验证,这是绝对不允许的

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第136张图片

router.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第137张图片

只需要在父路由增加拦截就可以了,子路由就会都有这个拦截,不需要子路由再一个一个添加 

main.js

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第138张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第139张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第140张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第141张图片

但是现在还有一个问题:界面拦住了,但是所有的接口都可以直接访问,非常危险,这个就是基于后端的请求拦截

在请求headers 中统一增加token

1.用户管理与登录:在请求headers 中统一增加token

main.js

可以用这种方法给所有请求加了统一的系统参数,比如在header里加上请求流水,请求时间等。

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第142张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第143张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第144张图片

gateway增加登录拦截

1.用户管理与登录:在gateway中增加登录拦截

application.properties

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第145张图片

LoginAdminGatewayFilter.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第146张图片

LoginAdminGatewayFilterFactory.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第147张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第148张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第149张图片

不是所有的请求都需要做登录拦截,比如登录接口、验证码图片接口

gateway实现控台登录拦截功能

1.用户管理与登录:gateway实现控台登录拦截功能

pom.xml(course)

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第150张图片

pom.xml(gateway)

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第151张图片

gateway模块并没有依赖server模块,所以有些jar包如redis , json等,需要单独在pom.xml中增加依赖

application.properties

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第152张图片

LoginAdminGatewayFilter.java

package com.course.gateway.filter;

import org.springframework.cloud.gateway.filter.GatewayFilter;
import org.springframework.cloud.gateway.filter.GatewayFilterChain;
import org.springframework.core.Ordered;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;
import org.springframework.web.server.ServerWebExchange;
import reactor.core.publisher.Mono;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.annotation.Resource;

@Component
public class LoginAdminGatewayFilter implements GatewayFilter, Ordered {
    private static final Logger LOG = LoggerFactory.getLogger(LoginAdminGatewayFilter.class);

    @Resource
    private RedisTemplate redisTemplate;

    @Override
    public Mono filter(ServerWebExchange exchange, GatewayFilterChain chain) {
        String path = exchange.getRequest().getURI().getPath();

        //请求地址中不包含/admin/的,不是控台请求,不需要拦截
        if (!path.contains("/admin/")){
            return chain.filter(exchange);
        }
        if (path.contains("/system/admin/user/login")
         || path.contains("/system/admin/user/logout")
         || path.contains("/system/admin/kaptcha")){
            LOG.info("不需要控台登录验证:{}",path);
            return chain.filter(exchange);
        }

        //获取header的token参数
        String token = exchange.getRequest().getHeaders().getFirst("token");
        LOG.info("控台登录验证开始,token:{}",token);
        if (token == null || token.isEmpty()){
            LOG.info("token为空,请求被拦截");
            exchange.getResponse().setStatusCode(HttpStatus.UNAUTHORIZED);
            return exchange.getResponse().setComplete();
        }
        Object object = redisTemplate.opsForValue().get(token);
        if (object == null){
            LOG.warn("token无效,请求被拦截");
            exchange.getResponse().setStatusCode(HttpStatus.UNAUTHORIZED);
            return exchange.getResponse().setComplete();
        }else {
            LOG.info("已登录:{}",object);
            return chain.filter(exchange);
        }
    }

    @Override
    public int getOrder() {
        return 1;
    }
}

http协议中有一些约定好的状态码,比如401未授权,404未找到,200正常处理等。

HttpStatus.java

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第153张图片

测试

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第154张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第155张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第156张图片 直接访问这个地址,是会报错的

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第157张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第158张图片

11-8 用户登录流程图

白底是前端部分,蓝底是后端部分

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第159张图片

验证码流程

开始->生成验证码token唯一标识->调用服务端图形验证码接口->生成验证码字符串->以token为key将字符串放入redis中,设置时效->返回验证码图片->结束

登录流程

开始->输入用户名、密码、验证码->前端密码加密(防止数据传输时泄漏)->组装登录参数包含验证码token->调用登录接口->密码加密->根据token到redis获取正确的验证码->

验证码正确?(这里的验证码错误分为两种,验证码已过期和验证码不正确)

1.->清除redis验证码根据用户名查询->用户存在?

        -是>比较密码正确?

                -是>生成登录token->以token为key将登录信息放入缓存中->返回用户信息-----success=true----->

                -否>打印日志:密码错->返回用户名不存在或密码错误----- success=false----->success=true----->

        -否>打印日志:用户名不存在->返回用户名不存在或密码错误

2.->打印日志并返回验证码错误----- success=false----->success=true----->

success=true?

-是>保存用户信息到h5 session缓存->勾选记住我

        -是>保存用户名密码到h5 local缓存中->结束

        -否>清空h5 local缓存中的用户密码->结束

-否>弹出登录失败提示框->结束

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第160张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第161张图片

                                                                                                                                     |

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第162张图片

Spring Cloud + Vue前后端分离-第11章 用户管理与登录_第163张图片

你可能感兴趣的:(springcloud,spring,cloud,vue.js,前端)