mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-26 09:11:52 +08:00
芋道源码
Gitee
commit
4b90792bf1
@ -140,6 +140,10 @@ public class QueryWrapperX<T> extends QueryWrapper<T> {
|
||||
case ORACLE_12C:
|
||||
super.eq("ROWNUM", 1);
|
||||
break;
|
||||
case SQL_SERVER:
|
||||
case SQL_SERVER2005:
|
||||
super.select("TOP 1 *"); // 由于 SQL Server 是通过 SELECT TOP 1 实现限制一条，所以只好使用 * 查询剩余字段
|
||||
break;
|
||||
default:
|
||||
super.last("LIMIT 1");
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
package cn.iocoder.yudao.module.member.controller.app.auth;
|
||||
|
||||
import cn.iocoder.yudao.framework.common.pojo.CommonResult;
|
||||
import cn.iocoder.yudao.framework.operatelog.core.annotations.OperateLog;
|
||||
import cn.iocoder.yudao.framework.security.core.annotations.PreAuthenticated;
|
||||
import cn.iocoder.yudao.module.member.controller.app.auth.vo.*;
|
||||
import cn.iocoder.yudao.module.member.service.auth.MemberAuthService;
|
||||
@ -35,7 +34,6 @@ public class AppAuthController {
|
||||
@ApiOperation("使用手机 + 密码登录")
|
||||
public CommonResult<AppAuthLoginRespVO> login(@RequestBody @Valid AppAuthLoginReqVO reqVO) {
|
||||
String token = authService.login(reqVO, getClientIP(), getUserAgent());
|
||||
// 返回结果
|
||||
return success(AppAuthLoginRespVO.builder().token(token).build());
|
||||
}
|
||||
|
||||
@ -49,7 +47,7 @@ public class AppAuthController {
|
||||
|
||||
@PostMapping("/send-sms-code")
|
||||
@ApiOperation(value = "发送手机验证码")
|
||||
public CommonResult<Boolean> sendSmsCode(@RequestBody @Valid AppAuthSendSmsReqVO reqVO) {
|
||||
public CommonResult<Boolean> sendSmsCode(@RequestBody @Valid AppAuthSmsSendReqVO reqVO) {
|
||||
authService.sendSmsCode(getLoginUserId(), reqVO);
|
||||
return success(true);
|
||||
}
|
||||
|
||||
@ -10,10 +10,10 @@ import lombok.experimental.Accessors;
|
||||
|
||||
import javax.validation.constraints.NotNull;
|
||||
|
||||
@ApiModel("用户 APP - 发送手机验证码 Response VO")
|
||||
@ApiModel("用户 APP - 发送手机验证码 Request VO")
|
||||
@Data
|
||||
@Accessors(chain = true)
|
||||
public class AppAuthSendSmsReqVO {
|
||||
public class AppAuthSmsSendReqVO {
|
||||
|
||||
@ApiModelProperty(value = "手机号", example = "15601691234")
|
||||
@Mobile
|
||||
@ -31,7 +31,7 @@ public interface AuthConvert {
|
||||
SocialUserBindReqDTO convert(Long userId, Integer userType, AppAuthSocialQuickLoginReqVO reqVO);
|
||||
SocialUserUnbindReqDTO convert(Long userId, Integer userType, AppSocialUserUnbindReqVO reqVO);
|
||||
|
||||
SmsCodeSendReqDTO convert(AppAuthSendSmsReqVO reqVO);
|
||||
SmsCodeSendReqDTO convert(AppAuthSmsSendReqVO reqVO);
|
||||
SmsCodeUseReqDTO convert(AppAuthResetPasswordReqVO reqVO, SmsSceneEnum scene, String usedIp);
|
||||
SmsCodeUseReqDTO convert(AppAuthSmsLoginReqVO reqVO, Integer scene, String usedIp);
|
||||
|
||||
|
||||
@ -2,8 +2,6 @@ package cn.iocoder.yudao.module.member.service.auth;
|
||||
|
||||
import cn.iocoder.yudao.framework.security.core.service.SecurityAuthFrameworkService;
|
||||
import cn.iocoder.yudao.module.member.controller.app.auth.vo.*;
|
||||
import cn.iocoder.yudao.module.member.controller.app.social.vo.AppSocialUserBindReqVO;
|
||||
import cn.iocoder.yudao.module.member.controller.app.social.vo.AppSocialUserUnbindReqVO;
|
||||
|
||||
import javax.validation.Valid;
|
||||
|
||||
@ -36,7 +34,6 @@ public interface MemberAuthService extends SecurityAuthFrameworkService {
|
||||
*/
|
||||
String smsLogin(@Valid AppAuthSmsLoginReqVO reqVO, String userIp, String userAgent);
|
||||
|
||||
|
||||
/**
|
||||
* 社交登录，使用 code 授权码
|
||||
*
|
||||
@ -85,6 +82,6 @@ public interface MemberAuthService extends SecurityAuthFrameworkService {
|
||||
* @param userId 用户编号
|
||||
* @param reqVO 发送信息
|
||||
*/
|
||||
void sendSmsCode(Long userId, AppAuthSendSmsReqVO reqVO);
|
||||
void sendSmsCode(Long userId, AppAuthSmsSendReqVO reqVO);
|
||||
|
||||
}
|
||||
|
||||
@ -288,7 +288,7 @@ public class MemberAuthServiceImpl implements MemberAuthService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void sendSmsCode(Long userId, AppAuthSendSmsReqVO reqVO) {
|
||||
public void sendSmsCode(Long userId, AppAuthSmsSendReqVO reqVO) {
|
||||
// TODO 要根据不同的场景，校验是否有用户
|
||||
smsCodeApi.sendSmsCode(AuthConvert.INSTANCE.convert(reqVO).setCreateIp(getClientIP()));
|
||||
}
|
||||
|
||||
@ -17,6 +17,7 @@ public interface ErrorCodeConstants {
|
||||
ErrorCode AUTH_LOGIN_CAPTCHA_CODE_ERROR = new ErrorCode(1002000004, "验证码不正确");
|
||||
ErrorCode AUTH_THIRD_LOGIN_NOT_BIND = new ErrorCode(1002000005, "未绑定账号，需要进行绑定");
|
||||
ErrorCode AUTH_TOKEN_EXPIRED = new ErrorCode(1002000006, "Token 已经过期");
|
||||
ErrorCode AUTH_MOBILE_NOT_EXISTS = new ErrorCode(1002000007, "手机号不存在");
|
||||
|
||||
// ========== 菜单模块 1002001000 ==========
|
||||
ErrorCode MENU_NAME_DUPLICATE = new ErrorCode(1002001000, "已经存在该名字的菜单");
|
||||
|
||||
@ -18,9 +18,9 @@ public enum SmsSceneEnum implements IntArrayValuable {
|
||||
|
||||
MEMBER_LOGIN(1, "user-sms-login", "会员用户 - 手机号登陆"),
|
||||
MEMBER_UPDATE_MOBILE(2, "user-sms-reset-password", "会员用户 - 修改手机"),
|
||||
MEMBER_FORGET_PASSWORD(3, "user-sms-update-mobile", "会员用户 - 忘记密码");
|
||||
MEMBER_FORGET_PASSWORD(3, "user-sms-update-mobile", "会员用户 - 忘记密码"),
|
||||
|
||||
// 如果未来希望管理后台支持手机验证码登陆，可以通过添加 ADMIN_MEMBER_LOGIN 枚举
|
||||
ADMIN_MEMBER_LOGIN(21, "admin-sms-login", "后台用户 - 手机号登录");
|
||||
|
||||
public static final int[] ARRAYS = Arrays.stream(values()).mapToInt(SmsSceneEnum::getScene).toArray();
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
package cn.iocoder.yudao.module.system.controller.admin.auth;
|
||||
|
||||
import cn.iocoder.yudao.framework.common.enums.CommonStatusEnum;
|
||||
import cn.iocoder.yudao.framework.common.enums.UserTypeEnum;
|
||||
import cn.iocoder.yudao.framework.common.pojo.CommonResult;
|
||||
import cn.iocoder.yudao.framework.common.util.collection.SetUtils;
|
||||
import cn.iocoder.yudao.framework.operatelog.core.annotations.OperateLog;
|
||||
@ -92,6 +91,25 @@ public class AuthController {
|
||||
return success(AuthConvert.INSTANCE.buildMenuTree(menuList));
|
||||
}
|
||||
|
||||
// ========== 短信登录相关 ==========
|
||||
|
||||
@PostMapping("/sms-login")
|
||||
@ApiOperation("使用短信验证码登录")
|
||||
@OperateLog(enable = false) // 避免 Post 请求被记录操作日志
|
||||
public CommonResult<AuthLoginRespVO> smsLogin(@RequestBody @Valid AuthSmsLoginReqVO reqVO) {
|
||||
String token = authService.smsLogin(reqVO, getClientIP(), getUserAgent());
|
||||
// 返回结果
|
||||
return success(AuthLoginRespVO.builder().token(token).build());
|
||||
}
|
||||
|
||||
@PostMapping("/send-sms-code")
|
||||
@ApiOperation(value = "发送手机验证码")
|
||||
@OperateLog(enable = false) // 避免 Post 请求被记录操作日志
|
||||
public CommonResult<Boolean> sendLoginSmsCode(@RequestBody @Valid AuthSmsSendReqVO reqVO) {
|
||||
authService.sendSmsCode(reqVO);
|
||||
return success(true);
|
||||
}
|
||||
|
||||
// ========== 社交登录相关 ==========
|
||||
|
||||
@GetMapping("/social-auth-redirect")
|
||||
@ -109,7 +127,7 @@ public class AuthController {
|
||||
@ApiOperation("社交快捷登录，使用 code 授权码")
|
||||
@OperateLog(enable = false) // 避免 Post 请求被记录操作日志
|
||||
public CommonResult<AuthLoginRespVO> socialQuickLogin(@RequestBody @Valid AuthSocialQuickLoginReqVO reqVO) {
|
||||
String token = authService.socialLogin(reqVO, getClientIP(), getUserAgent());
|
||||
String token = authService.socialQuickLogin(reqVO, getClientIP(), getUserAgent());
|
||||
// 返回结果
|
||||
return success(AuthLoginRespVO.builder().token(token).build());
|
||||
}
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
package cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth;
|
||||
|
||||
import io.swagger.annotations.ApiModel;
|
||||
import io.swagger.annotations.ApiModelProperty;
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Builder;
|
||||
import lombok.Data;
|
||||
import lombok.NoArgsConstructor;
|
||||
import org.hibernate.validator.constraints.Length;
|
||||
|
||||
import javax.validation.constraints.NotEmpty;
|
||||
import javax.validation.constraints.Pattern;
|
||||
|
||||
@ApiModel("管理后台 - 短信验证码的呢老姑 Request VO")
|
||||
@Data
|
||||
@NoArgsConstructor
|
||||
@AllArgsConstructor
|
||||
@Builder
|
||||
public class AuthSmsLoginReqVO {
|
||||
|
||||
@ApiModelProperty(value = "手机号", required = true, example = "yudaoyuanma")
|
||||
@NotEmpty(message = "手机号不能为空")
|
||||
@Length(min = 11, max = 11, message = "手机号格式错误，仅支持大陆手机号")
|
||||
@Pattern(regexp = "^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$", message = "账号格式为数字以及字母")
|
||||
private String mobile;
|
||||
|
||||
|
||||
|
||||
@ApiModelProperty(value = "短信验证码", required = true, example = "1024", notes = "验证码开启时，需要传递")
|
||||
@NotEmpty(message = "验证码不能为空", groups = CodeEnableGroup.class)
|
||||
private String code;
|
||||
|
||||
/**
|
||||
* 开启验证码的 Group
|
||||
*/
|
||||
public interface CodeEnableGroup {}
|
||||
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
package cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth;
|
||||
|
||||
import cn.iocoder.yudao.framework.common.validation.InEnum;
|
||||
import cn.iocoder.yudao.framework.common.validation.Mobile;
|
||||
import cn.iocoder.yudao.module.system.enums.sms.SmsSceneEnum;
|
||||
import io.swagger.annotations.ApiModel;
|
||||
import io.swagger.annotations.ApiModelProperty;
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Builder;
|
||||
import lombok.Data;
|
||||
import lombok.NoArgsConstructor;
|
||||
|
||||
import javax.validation.constraints.NotEmpty;
|
||||
import javax.validation.constraints.NotNull;
|
||||
|
||||
@ApiModel("管理后台 - 发送手机验证码 Request VO")
|
||||
@Data
|
||||
@NoArgsConstructor
|
||||
@AllArgsConstructor
|
||||
@Builder
|
||||
public class AuthSmsSendReqVO {
|
||||
|
||||
@ApiModelProperty(value = "手机号", required = true, example = "yudaoyuanma")
|
||||
@NotEmpty(message = "手机号不能为空")
|
||||
@Mobile
|
||||
private String mobile;
|
||||
|
||||
@ApiModelProperty(value = "短信场景", required = true, example = "1")
|
||||
@NotNull(message = "发送场景不能为空")
|
||||
@InEnum(SmsSceneEnum.class)
|
||||
private Integer scene;
|
||||
|
||||
}
|
||||
@ -3,6 +3,9 @@ package cn.iocoder.yudao.module.system.convert.auth;
|
||||
import cn.iocoder.yudao.framework.common.enums.UserTypeEnum;
|
||||
import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
|
||||
import cn.iocoder.yudao.framework.security.core.LoginUser;
|
||||
import cn.iocoder.yudao.module.system.api.sms.dto.code.SmsCodeSendReqDTO;
|
||||
import cn.iocoder.yudao.module.system.api.sms.dto.code.SmsCodeSendReqDTO;
|
||||
import cn.iocoder.yudao.module.system.api.sms.dto.code.SmsCodeUseReqDTO;
|
||||
import cn.iocoder.yudao.module.system.api.social.dto.SocialUserBindReqDTO;
|
||||
import cn.iocoder.yudao.module.system.api.social.dto.SocialUserUnbindReqDTO;
|
||||
import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.*;
|
||||
@ -73,7 +76,10 @@ public interface AuthConvert {
|
||||
}
|
||||
|
||||
SocialUserBindReqDTO convert(Long userId, Integer userType, AuthSocialBindLoginReqVO reqVO);
|
||||
|
||||
SocialUserBindReqDTO convert(Long userId, Integer userType, AuthSocialQuickLoginReqVO reqVO);
|
||||
|
||||
SmsCodeSendReqDTO convert(AuthSmsSendReqVO reqVO);
|
||||
|
||||
SmsCodeUseReqDTO convert(AuthSmsLoginReqVO reqVO, Integer scene, String usedIp);
|
||||
|
||||
}
|
||||
|
||||
@ -24,6 +24,9 @@ public class SecurityConfiguration {
|
||||
registry.antMatchers(buildAdminApi("/system/auth/social-auth-redirect")).permitAll();
|
||||
registry.antMatchers(buildAdminApi("/system/auth/social-quick-login")).permitAll();
|
||||
registry.antMatchers(buildAdminApi("/system/auth/social-bind-login")).permitAll();
|
||||
// 登录登录的接口
|
||||
registry.antMatchers(buildAdminApi("/system/auth/sms-login")).permitAll();
|
||||
registry.antMatchers(buildAdminApi("/system/auth/send-sms-code")).permitAll();
|
||||
// 验证码的接口
|
||||
registry.antMatchers(buildAdminApi("/system/captcha/**")).permitAll();
|
||||
// 获得租户编号的接口
|
||||
|
||||
@ -24,6 +24,23 @@ public interface AdminAuthService extends SecurityAuthFrameworkService {
|
||||
*/
|
||||
String login(@Valid AuthLoginReqVO reqVO, String userIp, String userAgent);
|
||||
|
||||
/**
|
||||
* 短信验证码发送
|
||||
*
|
||||
* @param reqVO 发送请求
|
||||
*/
|
||||
void sendSmsCode(AuthSmsSendReqVO reqVO);
|
||||
|
||||
/**
|
||||
* 短信登录
|
||||
*
|
||||
* @param reqVO 登录信息
|
||||
* @param userIp 用户 IP
|
||||
* @param userAgent 用户 UA
|
||||
* @return 身份令牌，使用 JWT 方式
|
||||
*/
|
||||
String smsLogin(AuthSmsLoginReqVO reqVO, String userIp, String userAgent) ;
|
||||
|
||||
/**
|
||||
* 社交快捷登录，使用 code 授权码
|
||||
*
|
||||
@ -32,7 +49,7 @@ public interface AdminAuthService extends SecurityAuthFrameworkService {
|
||||
* @param userAgent 用户 UA
|
||||
* @return 身份令牌，使用 JWT 方式
|
||||
*/
|
||||
String socialLogin(@Valid AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent);
|
||||
String socialQuickLogin(@Valid AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent);
|
||||
|
||||
/**
|
||||
* 社交绑定登录，使用 code 授权码 + 账号密码
|
||||
|
||||
@ -8,13 +8,13 @@ import cn.iocoder.yudao.framework.common.util.validation.ValidationUtils;
|
||||
import cn.iocoder.yudao.framework.security.core.LoginUser;
|
||||
import cn.iocoder.yudao.framework.security.core.authentication.MultiUsernamePasswordAuthenticationToken;
|
||||
import cn.iocoder.yudao.module.system.api.logger.dto.LoginLogCreateReqDTO;
|
||||
import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.AuthLoginReqVO;
|
||||
import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.AuthSocialBindLoginReqVO;
|
||||
import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.AuthSocialQuickLoginReqVO;
|
||||
import cn.iocoder.yudao.module.system.api.sms.SmsCodeApi;
|
||||
import cn.iocoder.yudao.module.system.controller.admin.auth.vo.auth.*;
|
||||
import cn.iocoder.yudao.module.system.convert.auth.AuthConvert;
|
||||
import cn.iocoder.yudao.module.system.dal.dataobject.user.AdminUserDO;
|
||||
import cn.iocoder.yudao.module.system.enums.logger.LoginLogTypeEnum;
|
||||
import cn.iocoder.yudao.module.system.enums.logger.LoginResultEnum;
|
||||
import cn.iocoder.yudao.module.system.enums.sms.SmsSceneEnum;
|
||||
import cn.iocoder.yudao.module.system.service.common.CaptchaService;
|
||||
import cn.iocoder.yudao.module.system.service.logger.LoginLogService;
|
||||
import cn.iocoder.yudao.module.system.service.permission.PermissionService;
|
||||
@ -39,6 +39,7 @@ import java.util.Objects;
|
||||
import java.util.Set;
|
||||
|
||||
import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception;
|
||||
import static cn.iocoder.yudao.framework.common.util.servlet.ServletUtils.getClientIP;
|
||||
import static cn.iocoder.yudao.module.system.enums.ErrorCodeConstants.*;
|
||||
import static java.util.Collections.singleton;
|
||||
|
||||
@ -72,6 +73,9 @@ public class AdminAuthServiceImpl implements AdminAuthService {
|
||||
@Resource
|
||||
private Validator validator;
|
||||
|
||||
@Resource
|
||||
private SmsCodeApi smsCodeApi;
|
||||
|
||||
@Override
|
||||
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
|
||||
// 获取 username 对应的 AdminUserDO
|
||||
@ -108,6 +112,34 @@ public class AdminAuthServiceImpl implements AdminAuthService {
|
||||
return createUserSessionAfterLoginSuccess(loginUser, LoginLogTypeEnum.LOGIN_USERNAME, userIp, userAgent);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void sendSmsCode(AuthSmsSendReqVO reqVO) {
|
||||
// 登录场景，验证是否存在
|
||||
if (userService.getUserByMobile(reqVO.getMobile()) == null) {
|
||||
throw exception(AUTH_MOBILE_NOT_EXISTS);
|
||||
}
|
||||
// 发送验证码
|
||||
smsCodeApi.sendSmsCode(AuthConvert.INSTANCE.convert(reqVO).setCreateIp(getClientIP()));
|
||||
}
|
||||
|
||||
@Override
|
||||
public String smsLogin(AuthSmsLoginReqVO reqVO, String userIp, String userAgent) {
|
||||
// 校验验证码
|
||||
smsCodeApi.useSmsCode(AuthConvert.INSTANCE.convert(reqVO, SmsSceneEnum.ADMIN_MEMBER_LOGIN.getScene(), userIp));
|
||||
|
||||
// 获得用户信息
|
||||
AdminUserDO user = userService.getUserByMobile(reqVO.getMobile());
|
||||
if (user == null) {
|
||||
throw exception(USER_NOT_EXISTS);
|
||||
}
|
||||
|
||||
// 创建 LoginUser 对象
|
||||
LoginUser loginUser = buildLoginUser(user);
|
||||
|
||||
// 缓存登陆用户到 Redis 中，返回 sessionId 编号
|
||||
return createUserSessionAfterLoginSuccess(loginUser, LoginLogTypeEnum.LOGIN_MOBILE, userIp, userAgent);
|
||||
}
|
||||
|
||||
private void verifyCaptcha(AuthLoginReqVO reqVO) {
|
||||
// 如果验证码关闭，则不进行校验
|
||||
if (!captchaService.isCaptchaEnable()) {
|
||||
@ -190,7 +222,7 @@ public class AdminAuthServiceImpl implements AdminAuthService {
|
||||
}
|
||||
|
||||
@Override
|
||||
public String socialLogin(AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent) {
|
||||
public String socialQuickLogin(AuthSocialQuickLoginReqVO reqVO, String userIp, String userAgent) {
|
||||
// 使用 code 授权码，进行登录。然后，获得到绑定的用户编号
|
||||
Long userId = socialUserService.getBindUserId(UserTypeEnum.ADMIN.getValue(), reqVO.getType(),
|
||||
reqVO.getCode(), reqVO.getState());
|
||||
|
||||
@ -97,6 +97,15 @@ public interface AdminUserService {
|
||||
*/
|
||||
AdminUserDO getUserByUsername(String username);
|
||||
|
||||
/**
|
||||
* 通过手机号获取用户
|
||||
*
|
||||
* @param mobile 手机号
|
||||
* @return 用户对象信息
|
||||
*/
|
||||
AdminUserDO getUserByMobile(String mobile);
|
||||
|
||||
|
||||
/**
|
||||
* 获得用户分页列表
|
||||
*
|
||||
|
||||
@ -203,6 +203,16 @@ public class AdminUserServiceImpl implements AdminUserService {
|
||||
return userMapper.selectByUsername(username);
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过手机号获取用户
|
||||
* @param mobile
|
||||
* @return
|
||||
*/
|
||||
@Override
|
||||
public AdminUserDO getUserByMobile(String mobile) {
|
||||
return userMapper.selectByMobile(mobile);
|
||||
}
|
||||
|
||||
@Override
|
||||
public PageResult<AdminUserDO> getUserPage(UserPageReqVO reqVO) {
|
||||
return userMapper.selectPage(reqVO, getDeptCondition(reqVO.getDeptId()));
|
||||
|
||||
@ -5,7 +5,7 @@ ENV = 'development'
|
||||
VUE_APP_TITLE = 芋道管理系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
VUE_APP_BASE_API = 'http://192.168.225.2'
|
||||
VUE_APP_BASE_API = 'http://localhost:48080'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
@ -75,3 +75,27 @@ export function socialBindLogin(type, code, state, username, password) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取登录验证码
|
||||
export function sendSmsCode(mobile, scene) {
|
||||
return request({
|
||||
url: '/system/auth/send-sms-code',
|
||||
method: 'post',
|
||||
data: {
|
||||
mobile,
|
||||
scene
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 短信验证码登录
|
||||
export function smsLogin(mobile, code) {
|
||||
return request({
|
||||
url: '/system/auth/sms-login',
|
||||
method: 'post',
|
||||
data: {
|
||||
mobile,
|
||||
code
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
BIN
yudao-ui-admin/src/assets/images/bg-mobile.png
Executable file
BIN
yudao-ui-admin/src/assets/images/bg-mobile.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
yudao-ui-admin/src/assets/images/bg.png
Executable file
BIN
yudao-ui-admin/src/assets/images/bg.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
yudao-ui-admin/src/assets/images/icon.png
Executable file
BIN
yudao-ui-admin/src/assets/images/icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 229 B |
Binary file not shown.
|
Before Width: | Height: | Size: 509 KiB |
BIN
yudao-ui-admin/src/assets/images/pic.png
Executable file
BIN
yudao-ui-admin/src/assets/images/pic.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
yudao-ui-admin/src/assets/images/profile.jpg
Normal file → Executable file
BIN
yudao-ui-admin/src/assets/images/profile.jpg
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 22 KiB |
BIN
yudao-ui-admin/src/assets/logo/login-logo.png
Normal file
BIN
yudao-ui-admin/src/assets/logo/login-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
387
yudao-ui-admin/src/assets/styles/login.scss
Normal file
387
yudao-ui-admin/src/assets/styles/login.scss
Normal file
@ -0,0 +1,387 @@
|
||||
/* ===== PC DESIGN ===== */
|
||||
$W: 1000;
|
||||
$H: 1920;
|
||||
$picW: 438;
|
||||
$picH: 560;
|
||||
$formW: 320;
|
||||
$tabW: $formW / 2;
|
||||
$rowH: 56;
|
||||
$buttonH: 50;
|
||||
|
||||
// container
|
||||
$containerBgColor: #e6ebf2;
|
||||
$containerBgImage: '../assets/images/bg.png';
|
||||
// container-logo
|
||||
$logoWidth: 417px;
|
||||
$logoHeight: 64px;
|
||||
$logoImage: '../assets/logo/login-logo.png';
|
||||
// container-content
|
||||
$contentWidth: round($W / $H * 100) * 1vw;
|
||||
$contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
|
||||
$contentBgColor: #ffffff;
|
||||
// container-content-pic
|
||||
$picWidth: round($picW / $H * 100) * 1vw;
|
||||
$picHeight: inherit;
|
||||
$picImage: '../assets/images/pic.png';
|
||||
// container-content-field
|
||||
$fieldWidth: $contentWidth - $picWidth;
|
||||
$fieldHeight: inherit;
|
||||
// container-content-field-form
|
||||
$formWidth: $formW * 1px;
|
||||
$tabWidth: $tabW * 1px;
|
||||
$rowHeight: $rowH * 1px;
|
||||
$buttonHeight: $buttonH * 1px;
|
||||
|
||||
// - - - - - 页面基础设置
|
||||
.container {
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width:100%;max-width:100px; height:auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
// 元素
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
min-width: 1080px;
|
||||
min-height: 620px;
|
||||
background-color: $containerBgColor;
|
||||
background-image: url($containerBgImage);
|
||||
background-size: cover;
|
||||
// 定位
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// 文字
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
.logo {
|
||||
// 元素
|
||||
width: $logoWidth;
|
||||
height: $logoHeight;
|
||||
background-image: url($logoImage);
|
||||
background-size: contain;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
margin-left: -$logoWidth/2;
|
||||
}
|
||||
.content {
|
||||
// 元素
|
||||
width: $contentWidth;
|
||||
height: $contentHeight;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
|
||||
border-radius: 20px;
|
||||
// 定位
|
||||
position: relative;
|
||||
.pic {
|
||||
// 元素
|
||||
width: $picWidth;
|
||||
height: $picHeight;
|
||||
background-image: url($picImage);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 20px 0 0 20px;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.field {
|
||||
width: $fieldWidth;
|
||||
height: $fieldHeight;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: $picWidth;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pc-title{ width: 100%; clear: both;}
|
||||
.mobile-title,
|
||||
.mobile-switch {
|
||||
display: none;
|
||||
}
|
||||
.form {
|
||||
box-sizing: border-box;
|
||||
width: $formWidth;
|
||||
// - - - tab
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
:deep(.el-tabs__item) {
|
||||
// 元素
|
||||
width: $tabWidth;
|
||||
height: $rowHeight;
|
||||
padding: 0;
|
||||
// 文字
|
||||
line-height: $rowHeight;
|
||||
color: #666666;
|
||||
}
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
font-weight: bold;
|
||||
color: #2F53EB;
|
||||
}
|
||||
:deep(.el-tabs__active-bar) {
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
// 元素
|
||||
width: 100%;
|
||||
height: $rowHeight;
|
||||
background: #f5f5f5;
|
||||
border: 0;
|
||||
border-radius: 28px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
line-height: 19px;
|
||||
color: #262626;
|
||||
}
|
||||
.code:deep(.el-input__inner) {
|
||||
padding: 0 24px;
|
||||
// 文字
|
||||
text-align: left;
|
||||
}
|
||||
:deep(.el-input__inner::-webkit-input-placeholder) { /* WebKit browsers */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C;
|
||||
}
|
||||
:deep(.el-input__inner:-moz-placeholder) { /* Mozilla Firefox 4 to 18 */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C;
|
||||
}
|
||||
:deep(.el-input__inner::-moz-placeholder) { /* Mozilla Firefox 19+ */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C;
|
||||
opacity:1;
|
||||
}
|
||||
:deep(.el-input__inner:-ms-input-placeholder) { /* Internet Explorer 10+ */
|
||||
font-weight: 400;
|
||||
color: #8C8C8C !important;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
position: relative;
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $rowHeight;
|
||||
box-sizing: border-box;
|
||||
// 定位
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
// 文字
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #2F53EB;
|
||||
span {
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid #D9D9D9;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-form-item__error) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
height: $buttonHeight;
|
||||
background: rgba(24, 144, 255, 0.2);
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
margin-bottom: 20px;
|
||||
// 文字
|
||||
line-height: 26px;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.button-active {
|
||||
background: #2F53EB;
|
||||
box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
// 元素
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
// 定位
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
a,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// - - - - - PC 最小尺寸设置
|
||||
@media screen and (min-width: 599px) and (max-width: 1366px) {
|
||||
.container {
|
||||
.content {
|
||||
width: 710px;
|
||||
height: 397px;
|
||||
.pic {
|
||||
width: 314px;
|
||||
}
|
||||
.field {
|
||||
width: calc(710px - 314px);
|
||||
left: 314px;
|
||||
.form {
|
||||
width: 320px;
|
||||
:deep(.el-input__inner) {
|
||||
width: 320px;
|
||||
height: 56px;
|
||||
}
|
||||
.button {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===== MOBILE DESIGN ===== */
|
||||
$mobileW: 375;
|
||||
$mobileH: 812;
|
||||
$mobileContentW: 327;
|
||||
$mobileContentH: 376;
|
||||
$mobileFormW: 280;
|
||||
$mobileRowH: 48;
|
||||
$mobileButtonH: 48;
|
||||
|
||||
// container
|
||||
$mobileContainerBgImage: '../assets/images/bg-mobile.png';
|
||||
// container-content
|
||||
$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
|
||||
$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth;
|
||||
// container-content-field-form
|
||||
$mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw;
|
||||
$mobileRowHeight: $mobileRowH * 1px;
|
||||
$mobileButtonHeight: $mobileButtonH * 1px;
|
||||
$iconBgImage: '../assets/images/icon.png';
|
||||
|
||||
// - - - - - 移动端设置
|
||||
@media screen and (max-width: 599px) {
|
||||
.container {
|
||||
// 元素
|
||||
background-image: url($mobileContainerBgImage);
|
||||
min-width: 280px;
|
||||
min-height: 568px;
|
||||
// 文字
|
||||
font-size: 17px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
// 元素
|
||||
width: $mobileContentWidth;
|
||||
height: $mobileContentHeight;
|
||||
min-width: 250px;
|
||||
min-height: 340px;
|
||||
// 定位
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.pic {
|
||||
display: none;
|
||||
}
|
||||
.field {
|
||||
// 元素
|
||||
width: inherit;
|
||||
min-height: inherit;
|
||||
// 定位
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.mobile-title {
|
||||
// 元素
|
||||
margin: 0 0 20px;
|
||||
display: block;
|
||||
}
|
||||
.form {
|
||||
width: $mobileFormWidth;
|
||||
// - - - tab
|
||||
:deep(.el-tabs__header) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
padding: 0;
|
||||
}
|
||||
// - - - input
|
||||
:deep(.el-input__inner) {
|
||||
height: $mobileRowHeight;
|
||||
line-height: 24px;
|
||||
// 文字
|
||||
text-align: center;
|
||||
color: #262626;
|
||||
}
|
||||
:deep(.el-form-item) {
|
||||
.button-code {
|
||||
// 元素
|
||||
height: $mobileRowHeight;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
height: $mobileButtonHeight;
|
||||
line-height: 24px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.mobile-switch {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
margin: 0;
|
||||
.icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background-image: url($iconBgImage);
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.mobile-switch:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
// 元素
|
||||
font-size: 12px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
color: #333333;
|
||||
opacity: 0.6;
|
||||
// 定位
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import {login, logout, getInfo, socialQuickLogin, socialBindLogin} from '@/api/login'
|
||||
import {login, logout, getInfo, socialQuickLogin, socialBindLogin, smsLogin} from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
|
||||
const user = {
|
||||
@ -86,7 +86,21 @@ const user = {
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 登录
|
||||
SmsLogin({ commit }, userInfo) {
|
||||
const mobile = userInfo.mobile.trim()
|
||||
const mobileCode = userInfo.mobileCode
|
||||
return new Promise((resolve, reject) => {
|
||||
smsLogin(mobile,mobileCode).then(res => {
|
||||
res = res.data;
|
||||
setToken(res.token)
|
||||
commit('SET_TOKEN', res.token)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取用户信息
|
||||
GetInfo({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
@ -1,61 +1,115 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">芋道后台管理系统</h3>
|
||||
<el-form-item prop="tenantName" v-if="tenantEnable">
|
||||
<el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
|
||||
<svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnable">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class="container">
|
||||
<div class="logo"></div>
|
||||
<!-- 登录区域 -->
|
||||
<div class="content">
|
||||
<!-- 配图 -->
|
||||
<div class="pic"></div>
|
||||
<!-- 表单 -->
|
||||
<div class="field">
|
||||
<!-- [移动端]标题 -->
|
||||
<h2 class="mobile-title">
|
||||
<h3 class="title">芋道后台管理系统</h3>
|
||||
</h2>
|
||||
|
||||
<el-form-item style="width:100%;">
|
||||
<div class="oauth-login" style="display:flex">
|
||||
<div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
|
||||
<img :src="item.img" height="25px" width="25px" alt="登录" >
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
<!-- 表单 -->
|
||||
<div class="form-cont">
|
||||
<el-tabs class="form" v-model="loginForm.loginType" style=" float:none;">
|
||||
<el-tab-pane label="账号密码登录" name="uname">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="短信验证码登录" name="sms">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
|
||||
<el-form-item prop="tenantName" v-if="tenantEnable">
|
||||
<el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
|
||||
<svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<!-- 账号密码登录 -->
|
||||
<div v-if="loginForm.loginType === 'uname'">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnable">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- 短信验证码登录 -->
|
||||
<div v-if="loginForm.loginType === 'sms'">
|
||||
<el-form-item prop="mobile">
|
||||
<el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号">
|
||||
<svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="mobileCode">
|
||||
<el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" placeholder="短信验证码"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<template slot="icon">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
|
||||
</template>
|
||||
<template slot="append">
|
||||
<span v-if="mobileCodeTimer <= 0" class="getMobileCode" @click="getSmsCode" style="cursor: pointer;">获取验证码</span>
|
||||
<span v-if="mobileCodeTimer > 0" class="getMobileCode">{{ mobileCodeTimer }}秒后可重新获取</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 下方的登录按钮 -->
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
||||
@click.native.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 社交登录 -->
|
||||
<el-form-item style="width:100%;">
|
||||
<div class="oauth-login" style="display:flex">
|
||||
<div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
|
||||
<img :src="item.img" height="25px" width="25px" alt="登录" >
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2020-2021 iocoder.cn All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<div class="footer">
|
||||
Copyright © 2020-2022 iocoder.cn All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCodeImg,socialAuthRedirect } from "@/api/login";
|
||||
import { getTenantIdByName } from "@/api/system/tenant";
|
||||
import {getCodeImg, sendSmsCode, socialAuthRedirect} from "@/api/login";
|
||||
import {getTenantIdByName} from "@/api/system/tenant";
|
||||
import Cookies from "js-cookie";
|
||||
import { encrypt, decrypt } from '@/utils/jsencrypt'
|
||||
import {decrypt, encrypt} from '@/utils/jsencrypt'
|
||||
import {SystemUserSocialTypeEnum} from "@/utils/constants";
|
||||
import { getTenantEnable } from "@/utils/ruoyi";
|
||||
import {getTenantEnable} from "@/utils/ruoyi";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
@ -64,26 +118,45 @@ export default {
|
||||
codeUrl: "",
|
||||
captchaEnable: true,
|
||||
tenantEnable: true,
|
||||
mobileCodeTimer: 0,
|
||||
loginForm: {
|
||||
loginType: "uname",
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
mobile: "",
|
||||
mobileCode: "",
|
||||
rememberMe: false,
|
||||
code: "",
|
||||
uuid: "",
|
||||
tenantName: "芋道源码",
|
||||
},
|
||||
loginRules: {
|
||||
scene: 21,
|
||||
|
||||
LoginRules: {
|
||||
username: [
|
||||
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
||||
{required: true, trigger: "blur", message: "用户名不能为空"}
|
||||
],
|
||||
password: [
|
||||
{ required: true, trigger: "blur", message: "密码不能为空" }
|
||||
{required: true, trigger: "blur", message: "密码不能为空"}
|
||||
],
|
||||
code: [{required: true, trigger: "change", message: "验证码不能为空"}],
|
||||
mobile: [
|
||||
{required: true, trigger: "blur", message: "手机号不能为空"},
|
||||
{
|
||||
validator: function (rule, value, callback) {
|
||||
if (/^1[0-9]\d{9}$/.test(value) == false) {
|
||||
callback(new Error("手机号格式错误"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}, trigger: "blur"
|
||||
}
|
||||
],
|
||||
code: [{ required: true, trigger: "change", message: "验证码不能为空" }],
|
||||
tenantName: [
|
||||
{ required: true, trigger: "blur", message: "租户不能为空" },
|
||||
{required: true, trigger: "blur", message: "租户不能为空"},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// debugger
|
||||
getTenantIdByName(value).then(res => {
|
||||
const tenantId = res.data;
|
||||
if (tenantId && tenantId >= 0) {
|
||||
@ -97,8 +170,10 @@ export default {
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
loading: false,
|
||||
redirect: undefined,
|
||||
// 枚举
|
||||
@ -142,11 +217,17 @@ export default {
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
const tenantName = Cookies.get('tenantName');
|
||||
const mobile = Cookies.get('mobile');
|
||||
const mobileCode = Cookies.get('mobileCode');
|
||||
const loginType = Cookies.get('loginType');
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
tenantName: tenantName === undefined ? this.loginForm.tenantName : tenantName,
|
||||
mobile: mobile === undefined ? this.loginForm.mobile : mobile,
|
||||
mobileCode: mobileCode === undefined ? this.loginForm.mobileCode : mobileCode,
|
||||
loginType: loginType === undefined ? this.loginForm.loginType : loginType,
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
@ -155,10 +236,10 @@ export default {
|
||||
this.loading = true;
|
||||
// 设置 Cookie
|
||||
if (this.loginForm.rememberMe) {
|
||||
Cookies.set("username", this.loginForm.username, { expires: 30 });
|
||||
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
||||
Cookies.set('tenantName', this.loginForm.tenantName, { expires: 30 });
|
||||
Cookies.set("username", this.loginForm.username, {expires: 30});
|
||||
Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
|
||||
Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
|
||||
Cookies.set('tenantName', this.loginForm.tenantName, {expires: 30});
|
||||
} else {
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("password");
|
||||
@ -166,8 +247,10 @@ export default {
|
||||
Cookies.remove('tenantName');
|
||||
}
|
||||
// 发起登陆
|
||||
this.$store.dispatch("Login", this.loginForm).then(() => {
|
||||
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
|
||||
console.log("发起登录", this.loginForm);
|
||||
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
|
||||
this.$router.push({path: this.redirect || "/"}).catch(() => {
|
||||
});
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
this.getCode();
|
||||
@ -187,74 +270,34 @@ export default {
|
||||
// console.log(res.url);
|
||||
window.location.href = res.data;
|
||||
});
|
||||
},
|
||||
/** ========== 以下为升级短信登录 ========== */
|
||||
getSmsCode() {
|
||||
if (this.mobileCodeTimer > 0) return;
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (!valid) return;
|
||||
sendSmsCode(this.loginForm.mobile, this.scene, this.loginForm.uuid, this.loginForm.code).then(res => {
|
||||
this.$modal.msgSuccess("获取验证码成功")
|
||||
this.mobileCodeTimer = 60;
|
||||
let msgTimer = setInterval(() => {
|
||||
this.mobileCodeTimer = this.mobileCodeTimer - 1;
|
||||
if (this.mobileCodeTimer <= 0) {
|
||||
clearInterval(msgTimer);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/login.scss";
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("http://static.yudao.iocoder.cn/login-background.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 500px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
.oauth-login {
|
||||
display: flex;
|
||||
align-items: cen;
|
||||
cursor:pointer;
|
||||
}
|
||||
.oauth-login-item {
|
||||
|
||||
@ -1,28 +1,63 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">绑定账号</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
|
||||
<span v-if="!loading">提 交</span>
|
||||
<span v-else>提 交 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class="container">
|
||||
<div class="logo"></div>
|
||||
<!-- 登录区域 -->
|
||||
<div class="content">
|
||||
<!-- 配图 -->
|
||||
<div class="pic"></div>
|
||||
<!-- 表单 -->
|
||||
<div class="field">
|
||||
<!-- [移动端]标题 -->
|
||||
<h2 class="mobile-title">
|
||||
<h3 class="title">芋道后台管理系统</h3>
|
||||
</h2>
|
||||
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2020-2021 iocoder.cn All Rights Reserved.</span>
|
||||
<!-- 表单 -->
|
||||
<div class="form-cont">
|
||||
<el-tabs class="form" v-model="loginForm.loginType " style=" float:none;">
|
||||
<el-tab-pane label="绑定账号" name="uname">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
|
||||
<!-- 账号密码登录 -->
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" v-if="captchaEnable">
|
||||
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
|
||||
@keyup.enter.native="handleLogin">
|
||||
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
|
||||
</el-input>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
|
||||
<!-- 下方的登录按钮 -->
|
||||
<el-form-item style="width:100%;">
|
||||
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
|
||||
@click.native.prevent="handleLogin">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer -->
|
||||
<div class="footer">
|
||||
Copyright © 2020-2022 iocoder.cn All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -36,6 +71,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
loginType: "uname",
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
rememberMe: false, // TODO 芋艿：后面看情况，去掉这块
|
||||
@ -87,10 +123,12 @@ export default {
|
||||
const username = Cookies.get("username");
|
||||
const password = Cookies.get("password");
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
const loginType = Cookies.get('loginType');
|
||||
this.loginForm = {
|
||||
username: username === undefined ? this.loginForm.username : username,
|
||||
password: password === undefined ? this.loginForm.password : decrypt(password),
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
||||
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
|
||||
loginType: loginType === undefined ? this.loginForm.loginType : loginType,
|
||||
};
|
||||
},
|
||||
handleLogin() {
|
||||
@ -123,64 +161,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("http://static.yudao.iocoder.cn/login-background.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.login-tip {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.login-code {
|
||||
width: 33%;
|
||||
height: 38px;
|
||||
float: right;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.el-login-footer {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
}
|
||||
@import "~@/assets/styles/login.scss";
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user