★ FEATURED ARTICLE 目录一、退出登录1.1 controller1.2 service二、获取当前用户信息2.1 controller2.2 service三、修改3.1 token创建3.2 参数修改3.3 传参四、前端一、退出登录与前面的管理员的退出登录没有区别注销token即可。1.1 controlleroj-modules/oj-friend/src/main/java/com/yj/friend/controller/user/UserController.javaDeleteMapping(/logout)publicRVoidlogout(RequestHeader(HttpConstants.AUTHENTICATION)Stringtoken){returntoR(userService.logout(token));}1.2 serviceoj-modules/oj-friend/src/main/java/com/yj/friend/service/user/IUserService.javabooleanlogout(Stringtoken);oj-modules/oj-friend/src/main/java/com/yj/friend/service/user/impl/UserService.javaOverridepublicbooleanlogout(Stringtoken){if(StrUtil.isNotEmpty(token)token.startsWith(HttpConstants.PREFIX)){tokentoken.replaceFirst(HttpConstants.PREFIX,StrUtil.EMPTY);}returntokenService.deleteLoginUser(token,jwtSecret);}二、获取当前用户信息与管理员端获取用户信息只需要多加上一个头像字段即可。2.1 controlleroj-modules/oj-friend/src/main/java/com/yj/friend/controller/user/UserController.javaGetMapping(/info)publicRLoginUserVOinfo(RequestHeader(HttpConstants.AUTHENTICATION)Stringtoken){returnuserService.info(token);}2.2 serviceoj-modules/oj-friend/src/main/java/com/yj/friend/service/user/IUserService.javaRLoginUserVOinfo(Stringtoken);oj-modules/oj-friend/src/main/java/com/yj/friend/service/user/impl/UserService.javaOverridepublicRLoginUserVOinfo(Stringtoken){//添加前缀if(StrUtil.isNotEmpty(token)token.startsWith(HttpConstants.PREFIX)){tokentoken.replaceFirst(HttpConstants.PREFIX,StrUtil.EMPTY);}//在redis先行获取LoginUserloginUsertokenService.getLoginUser(token,jwtSecret);if(nullloginUser){returnR.fail();}LoginUserVOloginUserVOnewLoginUserVO();loginUserVO.setNickName(loginUser.getNickName());loginUserVO.setHeadImage(loginUser.getHeadImage());returnR.success(loginUserVO);}三、修改3.1 token创建oj-common/oj-common-security/src/main/java/com/yj/common/security/service/TokenService.java加上字段3.2 参数修改oj-common/oj-common-core/src/main/java/com/yj/common/core/domain/LoginUser.java加上字段packagecom.yj.common.core.domain;importlombok.Data;DatapublicclassLoginUser{privateStringnickName;//用户昵称privateIntegeridentity;//用户身份1-管理员 2-普通用户privateStringheadImage;//头像}3.3 传参oj-modules/oj-system/src/main/java/com/yj/system/service/sysuser/impl/SysUserServiceImpl.java传nulloj-modules/oj-friend/src/main/java/com/yj/friend/service/user/impl/UserService.java传入头像四、前端oj-vue\oj-fe-c\src\views\Login.vuetemplatedivclasslogin-pagedivclassorange/divdivclassblue/divdivclassblue small/divdivclasslogin-boxdivclasslogo-boximg src/assets/logo.pngdivdivclasssys-nameOJ/div/div/divdivclassform-box-titlespan验证码登录/span/divdivclassform-box!--邮箱输入框--divclassform-itemimg src/assets/images/shouji.pngel-input v-modelmobileForm.emailtypeemailplaceholder请输入QQ邮箱//div!--验证码输入框--divclassform-itemimg src/assets/images/yanzhengma.pngel-input stylewidth:134pxv-modelmobileForm.codetypetextplaceholder请输入验证码/divclasscode-btn-boxclickgetCodespan{{txt}}/span/div/divdivclasssubmit-boxclickloginFun登录/注册/div/divdivclassgray-botp注册或点击登录代表您同意span服务条款/span和span隐私协议/span/p/div/div/div/templatescript setupimport{ref,reactive}fromvueimport{ElMessage}from element-plusimport{setToken}from /utils/cookieimport{sendCodeService,codeLoginService}from /apis/userimportrouterfrom /routerimport{Pattern}from /utils/validate// 邮箱登录表单phone → emaillet mobileFormreactive({email:,code:})let txtref(获取验证码)let timernull// QQ邮箱正则校验constcheckQQEmail(email){constregex/^[1-9]\d{4,}qq\.com$/returnregex.test(email)}// 获取验证码async functiongetCode(){// 1. 邮箱非空校验if(!mobileForm.email){ElMessage.warning(请输入QQ邮箱)return}// 2. QQ邮箱格式校验if(!checkQQEmail(mobileForm.email)){ElMessage.warning(请输入正确的QQ邮箱格式)return}// 3. 防止重复点击if(txt.value!获取验证码txt.value!重新获取验证码){return}try{// 调用后端发送邮箱验证码接口awaitsendCodeService(mobileForm)ElMessage.success(验证码发送成功)// 倒计时逻辑let num59txt.value59stimersetInterval((){num--if(num1){txt.value重新获取验证码clearInterval(timer)}else{txt.valuenums}},1000)}catch(error){ElMessage.error(验证码发送失败)clearInterval(timer)txt.value重新获取验证码}}// 登录/注册async functionloginFun(){try{// 校验参数if(!mobileForm.email||!mobileForm.code){ElMessage.warning(请输入邮箱和验证码)return}// 调用登录接口constloginRefawaitcodeLoginService(mobileForm)setToken(loginRef.data)ElMessage.success(登录成功)router.push(/c-oj/home/question)}catch(error){ElMessage.error(登录失败)}}// 销毁定时器onUnmounted((){if(timer)clearInterval(timer)})/scriptstyle langscssscoped.login-page{width:100vw;height:100vh;position:relative;margin-top:-60px;margin-left:-20px;overflow:hidden;.login-box{width:600px;height:604px;background:#FFFFFF;box-shadow:0px0px6px0pxrgba(0,0,0,0.1);border-radius:10px;opacity:0.9;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;padding:072px;padding-top:50px;overflow:hidden;.logo-box{display:flex;align-items:center;.refister-logo{margin-bottom:56px;}img{width:68px;height:68px;margin-right:16px;}.sys-name{height:33px;font-family:PingFangSC,PingFangSC;font-weight:600;font-size:24px;color:#222222;line-height:33px;margin-bottom:13px;}.sys-sub-name{height:22px;font-family:PingFangSC,PingFangSC;font-size:16px;color:#222222;line-height:22px;}}.form-box-title{height:116px;display:flex;align-items:center;span{font-family:PingFangSC,PingFangSC;font-weight:400;font-size:24px;color:#000000;line-height:33px;display:block;height:33px;margin-right:40px;position:relative;letter-spacing:1px;cursor:pointer;.active{font-weight:bold;::before{position:absolute;content:;bottom:-13px;left:0;width:100%;height:5px;background:#32C5FF;border-radius:10px;}}}}.gray-bot{position:absolute;left:0;text-align:center;margin-top:56px;width:100%;height:50px;background:#FAFAFA;font-family:PingFangSC,PingFangSC;font-weight:400;font-size:14px;color:#666666;line-height:50px;p{margin:0;}span{color:#32C5FF;cursor:pointer;}}:deep(.form-box){.submit-box{margin-top:90px;width:456px;height:48px;background:#96E1FE;border-radius:8px;cursor:pointer;display:flex;justify-content:center;align-items:center;font-family:PingFangSC,PingFangSC;font-weight:600;font-size:16px;color:#FFFFFF;letter-spacing:1px;.refister-submit{margin-top:72px;}:hover{background:#32C5FF;}}.form-item{display:flex;align-items:center;width:456px;height:48px;background:#F8F8F8;border-radius:8px;margin-bottom:30px;position:relative;.code-btn-box{position:absolute;right:0;width:151px;height:48px;background:#32C5FF;border-radius:8px;top:0;display:flex;align-items:center;justify-content:center;cursor:pointer;span{font-family:PingFangSC,PingFangSC;font-weight:400;font-size:16px;color:#FFFFFF;}}.error-tip{position:absolute;width:140px;text-align:right;padding-right:12px;height:20px;font-family:PingFangSC,PingFangSC;font-weight:400;font-size:14px;color:#FD4C40;line-height:20px;right:0;.bottom{right:157px;}}.el-input{width:380px;font-family:PingFangSC,PingFangSC;font-weight:400;font-size:16px;color:#222222;}.el-input__wrapper{border:none;box-shadow:none;background:transparent;width:230px;padding-left:0;}img{width:24px;height:24px;margin:018px;}}}}::after{position:absolute;top:0;left:0;height:100vh;bottom:0;right:0;background:rgba(255,255,255,.8);z-index:1;content:;}.orange{background:#F0714A;width:498px;height:498px;border-radius:50%;opacity:0.67;filter:blur(50px);left:14.2%;top:41%;position:absolute;}.blue{width:334px;height:334px;background:#32C5FF;opacity:0.67;filter:blur(50px);left:14.2%;top:42%;position:absolute;top:16.3%;left:80.7%;.small{width:186px;height:186px;top:8.2%;left:58.2%;}}}/style
阅读完成 · 觉得有帮助？
