轻松搞定分布式 token 校验

2023-09-21 01:09

👉 这是一个或许对你有用的社群
🐱 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：
《项目实战（视频）》：从书中学，往事上“练”
《互联网高频面试题》：面朝简历学习，春暖花开
《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题
《精进 Java 学习指南》：系统学习，互联网主流技术栈
《必读 Java 源码专栏》：知其然，知其所以然

👉这是一个或许对你有用的开源项目
国产 Star 破 10w+ 的开源项目，前端包括管理后台 + 微信小程序，后端支持单体和微服务架构。
功能涵盖 RBAC 权限、SaaS 多租户、数据权限、商城、支付、工作流、大屏报表、微信公众号等等功能：
Boot 地址：https://gitee.com/zhijiantianya/ruoyi-vue-pro
Cloud 地址：https://gitee.com/zhijiantianya/yudao-cloud
视频教程：https://doc.iocoder.cn

来源：blog.csdn.net/FUTEROX/
article/details/127288002

前言

今天带来的其实也没啥，就是简简单单的校验，去校验token，然后就好了，但是区别是啥呢，咱们这边有个大冤种就是这个 GateWay。此外这边的全部代码都是在WhiteHolev0.7里面的，可见的。

由于这个玩意，咱们不好再像以前直接去在拦截器里面去搞事情。而且说实话，请求那么多，如果全部都在GateWay去做的话，我是真的懒得去写那些啥配置了，到时候放行哪些接口都会搞乱。

所以问题背景就是在分布式微服务的场景下，如何去更好地校验token。并且通过我们的token我们可以做到单点登录。

那么这个时候我们就不得不提到我们上篇博文提到的内容了：

https://blog.csdn.net/FUTEROX/article/details/127232757

当然重点是登录模块。

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/ruoyi-vue-pro
视频教程：https://doc.iocoder.cn/video/

token存储

既然我们要校验，那么我们要做的就是拿到这个token，那么首先要做的就是生成token，然后存储token，咱们上一篇博文已经说的很清楚了，甚至还给出了对应的工具类。我们的流程是这样的：

那么在这里的话，和先前不一样的是，由于咱们的这个其实是一个多端的，所以的话咱们不仅仅有PC端还有移动端（当然移动端的作者也是我这个大冤种）所以token的话也是要做到多端的。那么这样的话，我们就要对上次做一点改动。

这里的话，和上次不一样的地方有两个。

Token 存储实体

这里新建了一个token的实体，用来存储到redis里面。

@Data
@AllArgsConstructor
@NoArgsConstructor
public class LoginToken {
    //这个是我们的存储Redis里面的Token
    private String PcLoginToken;
    private String MobileLoginToken;
    private String LoginIP;
}

login 业务代码

之后就是我们修改后的代码了。这个也就是和先前做了一点改动，主要是做多端的token嘛。

@Service
public class loginServiceImpl implements LoginService {

    @Autowired
    UserService userService;
    @Autowired
    RedisUtils redisUtils;
    //为安全期间这里也做一个20防刷
    @Override
    public R Login(LoginEntity entity) {

        String username = entity.getUsername();
        String password = entity.getPassword();
        password=password.replaceAll(" ","");
        if(redisUtils.hasKey(RedisTransKey.getLoginKey(username))){
            return R.error(BizCodeEnum.OVER_REQUESTS.getCode(),BizCodeEnum.OVER_REQUESTS.getMsg());
        }
        redisUtils.set(RedisTransKey.setLoginKey(username),1,20);
        UserEntity User = userService.getOne(
                new QueryWrapper<UserEntity>().eq("username", username)
        );
        if(User!=null){
            if(SecurityUtils.matchesPassword(password,User.getPassword())){
                //登录成功，签发token,按照平台类型去签发不同的Token
                String token = JwtTokenUtil.generateToken(User);
                //登录成功后，将userid--->token存redis，便于做登录验证
                String ipAddr = GetIPAddrUtils.GetIPAddr();
                if(entity.getType().equals(LoginType.PcType)){
                    LoginToken loginToken = new LoginToken(token,null,ipAddr);
                    redisUtils.set(RedisTransKey.setTokenKey(User.getUserid()+":"+LoginType.PcType)
                            ,loginToken,7, TimeUnit.DAYS
                    );
                    return Objects.requireNonNull(R.ok(BizCodeEnum.SUCCESSFUL.getMsg())
                                    .put(LoginType.PcLoginToken, token))
                            .put("userid",User.getUserid());
                }else if (entity.getType().equals(LoginType.MobileType)){
                    LoginToken loginToken = new LoginToken(null,token,ipAddr);
                    redisUtils.set(RedisTransKey.setTokenKey(User.getUserid()+":"+LoginType.MobileType)
                            ,loginToken,7, TimeUnit.DAYS
                    );
                    return Objects.requireNonNull(R.ok(BizCodeEnum.SUCCESSFUL.getMsg())
                                    .put(LoginType.PcLoginToken, token))
                            .put("userid",User.getUserid());
                } else {
                    return R.error(BizCodeEnum.NUNKNOW_LGINTYPE.getCode(),BizCodeEnum.NUNKNOW_LGINTYPE.getMsg());
                }
            }else {
                return R.error(BizCodeEnum.BAD_PUTDATA.getCode(),BizCodeEnum.BAD_PUTDATA.getMsg());
            }
        }else {
            return R.error(BizCodeEnum.NO_SUCHUSER.getCode(),BizCodeEnum.NO_SUCHUSER.getMsg());
        }
    }
}

枚举类修改

同样的这里和先前的枚举类有一点不一样，主要是多了一点东西。

public enum BizCodeEnum {
    UNKNOW_EXCEPTION(10000,"系统未知异常"),
    VAILD_EXCEPTION(10001,"参数格式校验失败"),
    HAS_USERNAME(10002,"已存在该用户"),
    OVER_REQUESTS(10003,"访问频次过多"),
    OVER_TIME(10004,"操作超时"),
    BAD_DOING(10005,"疑似恶意操作"),
    BAD_EMAILCODE_VERIFY(10007,"邮箱验证码错误"),
    REPARATION_GO(10008,"请重新操作"),
    NO_SUCHUSER(10009,"该用户不存在"),
    BAD_PUTDATA(10010,"信息提交错误，请重新检查"),
    NOT_LOGIN(10011,"用户未登录"),
    BAD_LOGIN_PARAMS(10012,"请求异常！触发5次以上账号将保护性封禁"),
    NUNKNOW_LGINTYPE(10013,"平台识别异常"),
    BAD_TOKEN(10014,"token校验失败"),
    SUCCESSFUL(200,"successful");

    private int code;
    private String msg;
    BizCodeEnum(int code,String msg){
        this.code = code;
        this.msg = msg;
    }

    public int getCode() {
        return code;
    }

    public String getMsg() {
        return msg;
    }
}

当然同样的，多的东西还有几个异常类，这个其实就是继承了Exception。

/**
 * 校验用户登录时，参数不对的情况，此时可能是恶意爬虫
 * */
public class BadLoginParamsException extends Exception{
    public BadLoginParamsException(){}
    public BadLoginParamsException(String message){
        super(message);
    }

}
public class BadLoginTokenException extends Exception{
    public BadLoginTokenException(){}
    public BadLoginTokenException(String message){
        super(message);
    }
}
public class NotLoginException extends Exception{
    public NotLoginException(){}
    public NotLoginException(String message){
        super(message);
    }
}

其他的倒还是和先前的保持一致。

存储效果

那么到此我们在登录部分完成了对token的存储，但是这个是在服务端，现在这个玩意已经存到了咱们的redis里面：

客户端存储

现在我们服务端已经存储好了，那么接下来就是要在客户端进行存储。这个也好办，我们直接来看到完整的用户登录代码就知道了。

<template>
    <div>
        <el-form :model="formLogin" :rules="rules" ref="ruleForm" label-width="0px" >
            <el-form-item prop="username">
                <el-input v-model="formLogin.username" placeholder="账号">
                    <i slot="prepend" class="el-icon-s-custom"/>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="密码" v-model="formLogin.password">
                    <i slot="prepend" class="el-icon-lock"/>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-row :span="24">
                    <el-col :span="12">
                        <el-input v-model="formLogin.code" auto-complete="off"  placeholder="请输入验证码" size=""></el-input>
                    </el-col>
                    <el-col :span="12">
                        <div class="login-code" @click="refreshCode">
                            <!--验证码组件-->
                            <s-identify :identifyCode="identifyCode"></s-identify>
                        </div>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()" style="margin-left: auto;width: 35%">登录</el-button>
                    <el-button type="primary" @click="goRegister" style="margin-left: 27%;width: 35%" >注册</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import SIdentify from "../../components/SIdentify/SIdentify";
    export default {
        name: "loginbyUserName",
        components: { SIdentify },
        data() {
            return{
                formLogin: {
                    username: "",
                    password: "",
                    code: ""
                },
                identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
                identifyCode: '',
                // 校验
                rules: {
                    username:
                            [
                                { required: true, message: "请输入用户名", trigger: "blur" }
                            ],
                    password: [
                        { required: true, message: "请输入密码(区分大小写)", trigger: "blur" }
                    ],
                    code: [
                        { required: true, message: "请输入验证码", trigger: "blur" }
                    ]
                }

            }
        },
        mounted () {
            // 初始化验证码
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        methods:{
            refreshCode () {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            makeCode (o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
                }
            },
            randomNum (min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },

            submitForm(){

                if (this.formLogin.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
                    this.$message.error('请填写正确验证码')
                    this.refreshCode()

                }
                else {
                    //这边后面做一个提交，服务器验证，通过之后获得token
                    this.axios({
                        url: "/user/user/login",
                        method: 'post',
                        data:{
                            "username":this.formLogin.username,
                            "password":this.formLogin.password,
                            "type": "PcType",
                        }
                    }).then((res)=>{
                        res = res.data
                        if (res.code===10001){
                            alert("请将对应信息填写完整！")
                        }else if(res.code===0){
                            alert("登录成功")
                            localStorage.setExpire("LoginToken",res.PcLoginToken,this.OverTime)
                            localStorage.setExpire("userid",res.userid,this.OverTime)
                            this.$router.push({ path: '/userinfo', query: {'userid':res.userid} });
                        }else {
                            alert(res.msg);
                        }
                    })
                }
            },
            goRegister(){
                this.$router.push("/register")
            }
        },
    }
</script>

<style scoped>
</style>

这里的话，咱们对localStorage做了一点优化：

这个代码是在main.js直接搞的。

Storage.prototype.setExpire=(key, value, expire) =>{
        let obj={
        data:value,
        time:Date.now(),
        expire:expire
        };
        localStorage.setItem(key,JSON.stringify(obj));
        }
//Storage优化
        Storage.prototype.getExpire= key =>{
        let val =localStorage.getItem(key);
        if(!val){
        return val;
        }
        val =JSON.parse(val);
        if(Date.now()-val.time>val.expire){
        localStorage.removeItem(key);
        return null;
        }
        return val.data;
        }

这个this.OverTime 就是一个全局变量，就是7天过期的意思。

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能
项目地址：https://github.com/YunaiV/yudao-cloud
视频教程：https://doc.iocoder.cn/video/

token验证

前面咱们说完了这个存储，那么现在的话咱们就是验证服务了。首先我们来看到什么地方需要验证。

我们拿这个为例子：

主页的话，都是get请求，没啥技术含量，不过我不介意再水一篇博客~。那么就是咱们这个页面需要。

那么在这里的话我先说一下执行流程，这样的话咱们完整的案例就起来了：

前端提交

那么现在咱们来看看前端的代码：

<script>
    export default {
    name: "myspace",
    data() {

    return {

}
},
    created() {
    //先对token再进行验证
    let loginToken = localStorage.getExpire("LoginToken");
    let userid = localStorage.getExpire("userid");
    //这个只有用户自己才能进入，自己只能进入自己对应的MySpace
    if(loginToken==null && userid==null){
    alert("检测到您未登录，请先登录")
    this.$router.push({path: "/login"});
}else {
    //发送token验证token是否正常，否则一样不给过
    this.axios({
    url: "/user/user/space/isLogin",
    method: 'get',
    headers: {
    "userid": userid,
    "loginType": "PcType",
    "loginToken": loginToken,
},
    params: {
    'userid': userid,
}
}).then((res)=>{
    res = res.data;
    if (!(res.code === 0)) {
    alert(res.msg)
    this.$router.push({path: "/login"});
}
}).catch((err)=>{
    alert("未知异常，请重新登录")
    this.$router.push({path: "/login"});
});

}
}
}
</script>

前面的那些玩意没啥用，咱们直接看到这个实际执行的代码。

后端校验

ok，现在咱们可以来聊聊这个后端的校验了，这个还是很重要的，也是咱们今天的主角。

那么在开始的时候咱们说了这个使用拦截器的方案并不是可行的，而且在后面可能我们还需要在业务处理的时候拿到token去解析里面的东西，完成一些处理，到时候在拦截器的时候也不好处理。

而且重点是并不是所有的接口都要的，但是也不是少部分的接口不要，这TM就尴尬了，那么如何破局。那么此时我们就需要定位到每一个具体的方法上面，那么问题不就解决了，这个咋搞，诶嘿，搞个切面+注解不就完了。

自定义注解

先定义一个注解

@Target(ElementType.METHOD)
@Retention(RetentionPolicy.RUNTIME)
public @interface NeedLogin {
    String value() default "";
}

这个注解我放在了common组件下：

切面处理

那么之后就是咱们的切面了，我们刚刚定义的异常处理类都是在这个切面上处理的。

public class VerificationAspect {

    @Autowired
    RedisUtils redisUtils;

    @Pointcut("@annotation(com.huterox.common.holeAnnotation.NeedLogin)")
    public void verification() {}

    /**
     * 环绕通知 @Around ,当然也可以使用 @Before (前置通知)  @After (后置通知)就算了
     * @param proceedingJoinPoint
     * @return
     * 我们这里再直接抛出异常，反正有那个谁统一异常类
     */

    @Around("verification()")
    public Object verification(ProceedingJoinPoint proceedingJoinPoint) throws Throwable{

        RequestAttributes requestAttributes = RequestContextHolder.getRequestAttributes();
        ServletRequestAttributes servletRequestAttributes = (ServletRequestAttributes) requestAttributes;
        assert servletRequestAttributes != null;
        HttpServletRequest request = servletRequestAttributes.getRequest();
        //分登录的设备进行验证
        String loginType = request.getHeader("loginType");
        String userid = request.getHeader("userid");
        String tokenUser = request.getHeader("loginToken");
        String tokenKey = RedisTransKey.getTokenKey(userid + ":" + loginType);
        if(tokenUser==null || userid==null || loginType==null){
            throw new BadLoginParamsException();
        }
        if(redisUtils.hasKey(tokenKey)){
            if(loginType.equals(LoginType.PcType)){
                Object o = redisUtils.get(tokenKey);
                LoginToken loginToken = JSON.parseObject(o.toString(), LoginToken.class);
                if(!loginToken.getPcLoginToken().equals(tokenUser)){
                    throw new BadLoginTokenException();
                }
            }else if (loginType.equals(LoginType.MobileType)){
                Object o = redisUtils.get(tokenKey);
                LoginToken loginToken = JSON.parseObject(o.toString(), LoginToken.class);
                if(!loginToken.getMobileLoginToken().equals(tokenUser)){
                    throw new BadLoginTokenException();
                }
            }
        }else {
            throw new NotLoginException();
        }

        return proceedingJoinPoint.proceed();
    }
}

使用

那么接下来就是使用了。我们来看到这个：

这个是我们的controller，作用就是用来检验这个用户本地的token对不对的，那么实现的服务类啥也没有：

之后我们来看到咱们的一个效果：

可以看到在进入页面的时候，钩子函数会请求咱们的这个接口，然后的话，咱们通过这个接口的话可以看到验证的效果。这里验证通过了。

总结

让我康康这篇文章的效果咋样，If it works well, I’ll take out my development log directly and go to Bling Bling your eyes.！

欢迎加入我的知识星球，全面提升技术能力。

👉 加入方式，“长按”或“扫描”下方二维码噢：

星球的内容包括：项目实战、面试招聘、源码解析、学习路线。

文章有帮助的话，在看，转发吧。
谢谢支持哟 (*^__^*）

微信扫码关注该文公众号作者

戳这里提交新闻线索和高质量文章给我们。

来源: qq

点击查看作者最近其他文章