huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2025-01-19 19:50:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

接入 dingtalk 钉钉的三方登陆，流程未接入

Browse Source
This commit is contained in:
YunaiV 2021-10-02 18:31:05 +08:00
parent a56b4a7c9c
commit e05d90590e
15 changed files with 342 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/controller/auth/SysAuthController.java
View File

@ -1,29 +1,22 @@
package cn.iocoder.yudao.adminserver.modules.system.controller.auth;
import cn.hutool.core.net.url.UrlBuilder;
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONUtil;
import cn.iocoder.yudao.adminserver.modules.system.enums.user.SysUserSocialTypeEnum;
import cn.iocoder.yudao.adminserver.modules.system.service.auth.SysUserSessionService;
import cn.iocoder.yudao.framework.common.enums.CommonStatusEnum;
import cn.iocoder.yudao.framework.common.pojo.CommonResult;
import cn.iocoder.yudao.framework.common.util.http.HttpUtils;
import cn.iocoder.yudao.framework.operatelog.core.annotations.OperateLog;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthLoginReqVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthLoginRespVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthMenuRespVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthPermissionInfoRespVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.*;
import cn.iocoder.yudao.adminserver.modules.system.convert.auth.SysAuthConvert;
import cn.iocoder.yudao.adminserver.modules.system.dal.dataobject.permission.SysMenuDO;
import cn.iocoder.yudao.adminserver.modules.system.dal.dataobject.permission.SysRoleDO;
import cn.iocoder.yudao.adminserver.modules.system.dal.dataobject.user.SysUserDO;
import cn.iocoder.yudao.adminserver.modules.system.enums.permission.MenuTypeEnum;
import cn.iocoder.yudao.adminserver.modules.system.enums.user.SysUserSocialTypeEnum;
import cn.iocoder.yudao.adminserver.modules.system.service.auth.SysAuthService;
import cn.iocoder.yudao.adminserver.modules.system.service.permission.SysPermissionService;
import cn.iocoder.yudao.adminserver.modules.system.service.permission.SysRoleService;
import cn.iocoder.yudao.adminserver.modules.system.service.user.SysUserService;
import cn.iocoder.yudao.framework.common.enums.CommonStatusEnum;
import cn.iocoder.yudao.framework.common.pojo.CommonResult;
import cn.iocoder.yudao.framework.common.util.collection.SetUtils;
import com.aliyuncs.CommonResponse;
import cn.iocoder.yudao.framework.common.util.http.HttpUtils;
import cn.iocoder.yudao.framework.operatelog.core.annotations.OperateLog;
import com.xkcoding.justauth.AuthRequestFactory;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
@ -35,26 +28,18 @@ import me.zhyd.oauth.model.AuthResponse;
import me.zhyd.oauth.model.AuthUser;
import me.zhyd.oauth.request.AuthRequest;
import me.zhyd.oauth.utils.AuthStateUtils;
import org.apache.commons.lang.StringUtils;
import org.quartz.SimpleTrigger;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.util.UriBuilder;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;
import java.io.IOException;
import java.net.URL;
import java.nio.charset.Charset;
import java.util.List;
import static cn.iocoder.yudao.framework.common.pojo.CommonResult.success;
import static cn.iocoder.yudao.framework.security.core.util.SecurityFrameworkUtils.getLoginUserId;
import static cn.iocoder.yudao.framework.security.core.util.SecurityFrameworkUtils.getLoginUserRoleIds;
import static cn.iocoder.yudao.framework.common.util.servlet.ServletUtils.getClientIP;
import static cn.iocoder.yudao.framework.common.util.servlet.ServletUtils.getUserAgent;
import static cn.iocoder.yudao.framework.security.core.util.SecurityFrameworkUtils.getLoginUserId;
import static cn.iocoder.yudao.framework.security.core.util.SecurityFrameworkUtils.getLoginUserRoleIds;
@Api(tags = "认证")
@RestController
@ -71,8 +56,6 @@ public class SysAuthController {
private SysRoleService roleService;
@Resource
private SysPermissionService permissionService;
@Resource
private SysUserSessionService sysUserSessionService;
@Resource
private AuthRequestFactory authRequestFactory;
@ -86,42 +69,6 @@ public class SysAuthController {
return success(SysAuthLoginRespVO.builder().token(token).build());
}
@GetMapping("/third-login-redirect")
@ApiOperation("三方登陆的跳转")
@ApiImplicitParams({
@ApiImplicitParam(name = "type", value = "三方类型", required = true, dataTypeClass = Integer.class),
@ApiImplicitParam(name = "redirectUri", value = "回调路径", dataTypeClass = String.class)
})
public CommonResult<String> login(@RequestParam("type") Integer type,
@RequestParam("redirectUri") String redirectUri) throws IOException {
// 获得对应的 AuthRequest 实现
AuthRequest authRequest = authRequestFactory.get(SysUserSocialTypeEnum.valueOfType(type).getSource());
// 生成跳转地址
String authorizeUri = authRequest.authorize(AuthStateUtils.createState());
authorizeUri = HttpUtils.replaceUrlQuery(authorizeUri, "redirect_uri", redirectUri);
// authorizeUri = UrlBuilder.fromBaseUrl(authorizeUri).queryParam("redirect_uri", redirectUri).build();
return CommonResult.success(authorizeUri);
}
@RequestMapping("/{type}/callback")
public AuthResponse login(@PathVariable String type, AuthCallback callback) {
AuthRequest authRequest = authRequestFactory.get(type);
AuthResponse<AuthUser> response = authRequest.login(callback);
log.info("【response】= {}", JSONUtil.toJsonStr(response));
return response;
}
// @RequestMapping("/auth2/login/{oauthType}")
// @ApiOperation("第三方登录")
// @OperateLog(enable = false) // 避免 Post 请求被记录操作日志
// public CommonResult<SysAuthLoginRespVO> login(@PathVariable String oauthType) {
// Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
// //TODO NPE
// String token = sysUserSessionService.getSessionId(authentication.getName());
// // 返回结果
// return success(SysAuthLoginRespVO.builder().token(token).build());
// }
@GetMapping("/get-permission-info")
@ApiOperation("获取登陆用户的权限信息")
public CommonResult<SysAuthPermissionInfoRespVO> getPermissionInfo() {
@ -153,4 +100,38 @@ public class SysAuthController {
return success(SysAuthConvert.INSTANCE.buildMenuTree(menuList));
}
// ========== 三方登陆相关 ==========
@GetMapping("/third-login-redirect")
@ApiOperation("三方登陆的跳转")
@ApiImplicitParams({
@ApiImplicitParam(name = "type", value = "三方类型", required = true, dataTypeClass = Integer.class),
@ApiImplicitParam(name = "redirectUri", value = "回调路径", dataTypeClass = String.class)
})
public CommonResult<String> thirdLoginRedirect(@RequestParam("type") Integer type,
@RequestParam("redirectUri") String redirectUri) {
// 获得对应的 AuthRequest 实现
AuthRequest authRequest = authRequestFactory.get(SysUserSocialTypeEnum.valueOfType(type).getSource());
// 生成跳转地址
String authorizeUri = authRequest.authorize(AuthStateUtils.createState());
authorizeUri = HttpUtils.replaceUrlQuery(authorizeUri, "redirect_uri", redirectUri);
return CommonResult.success(authorizeUri);
}
@PostMapping("/third-login")
@ApiOperation("三方登陆，使用 code 授权码")
@OperateLog(enable = false) // 避免 Post 请求被记录操作日志
public CommonResult<SysAuthLoginRespVO> thirdLogin(@RequestBody @Valid SysAuthThirdLoginReqVO reqVO) {
String token = authService.thirdLogin(reqVO, getClientIP(), getUserAgent());
return null;
}
@RequestMapping("/{type}/callback")
public AuthResponse login(@PathVariable String type, AuthCallback callback) {
AuthRequest authRequest = authRequestFactory.get(type);
AuthResponse<AuthUser> response = authRequest.login(callback);
log.info("【response】= {}", JSONUtil.toJsonStr(response));
return response;
}
}

37
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/controller/auth/vo/auth/SysAuthThirdLoginReqVO.java Normal file
View File

@ -0,0 +1,37 @@
package cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth;
import cn.iocoder.yudao.adminserver.modules.system.enums.user.SysUserSocialTypeEnum;
import cn.iocoder.yudao.framework.common.validation.InEnum;
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.NotNull;
import javax.validation.constraints.Pattern;
@ApiModel("三方登陆 Request VO，使用 code 授权码")
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class SysAuthThirdLoginReqVO {
@ApiModelProperty(value = "三方平台的类型", required = true, example = "10", notes = "参见 SysUserSocialTypeEnum 枚举值")
@InEnum(SysUserSocialTypeEnum.class)
@NotNull(message = "三方平台的类型不能为空")
private Integer type;
@ApiModelProperty(value = "授权码", required = true, example = "1024")
@NotEmpty(message = "授权码不能为空")
private String code;
@ApiModelProperty(value = "state", required = true, example = "9b2ffbc1-7425-4155-9894-9d5c08541d62")
@NotEmpty(message = "state 不能为空")
private String state;
}

4
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/convert/auth/SysAuthConvert.java
View File

@ -2,6 +2,7 @@ package cn.iocoder.yudao.adminserver.modules.system.convert.auth;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthMenuRespVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthPermissionInfoRespVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthThirdLoginReqVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.user.vo.profile.SysUserProfileUpdatePasswordReqVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.user.vo.profile.SysUserProfileUpdateReqVO;
import cn.iocoder.yudao.adminserver.modules.system.controller.user.vo.user.SysUserCreateReqVO;
@ -11,6 +12,7 @@ import cn.iocoder.yudao.adminserver.modules.system.dal.dataobject.user.SysUserDO
import cn.iocoder.yudao.adminserver.modules.system.enums.permission.MenuIdEnum;
import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
import cn.iocoder.yudao.framework.security.core.LoginUser;
import me.zhyd.oauth.model.AuthCallback;
import me.zhyd.oauth.model.AuthUser;
import org.mapstruct.Mapper;
import org.mapstruct.Mapping;
@ -43,6 +45,8 @@ public interface SysAuthConvert {
LoginUser convert(SysUserProfileUpdatePasswordReqVO reqVO);
AuthCallback convert(SysAuthThirdLoginReqVO bean);
/**
* 将菜单列表，构建成菜单树
*

9
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/dal/dataobject/user/SysUserSocialDO.java
View File

@ -41,6 +41,7 @@ public class SysUserSocialDO extends BaseDO {
* 三方平台的类型
*/
private SysUserSocialTypeEnum type;
/**
* 三方 openid
*/
@ -56,6 +57,10 @@ public class SysUserSocialDO extends BaseDO {
* 如果没有 unionId 的平台，直接使用 openid 作为该字段的值
*/
private String unionId;
/**
* 原始 Token 数据，一般是 JSON 格式
*/
private String rawTokenInfo;
/**
* 用户昵称
@ -66,9 +71,9 @@ public class SysUserSocialDO extends BaseDO {
*/
private String avatar;
/**
* 原始数据，一般是 JSON 格式
* 原始用户数据，一般是 JSON 格式
*/
private String info;
private String rawUserInfo;
}

2
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/enums/user/SysUserSocialTypeEnum.java
View File

@ -3,6 +3,7 @@ package cn.iocoder.yudao.adminserver.modules.system.enums.user;
import cn.hutool.core.util.ArrayUtil;
import cn.iocoder.yudao.adminserver.modules.system.enums.errorcode.SysErrorCodeTypeEnum;
import cn.iocoder.yudao.framework.common.core.IntArrayValuable;
import com.fasterxml.jackson.annotation.JsonCreator;
import jodd.util.ArraysUtil;
import lombok.AllArgsConstructor;
import lombok.Getter;
@ -19,6 +20,7 @@ import java.util.Arrays;
public enum SysUserSocialTypeEnum implements IntArrayValuable {
GITEE(10, "GITEE"), // https://gitee.com/api/v5/oauth_doc#/
DINGTALK(20, "DINGTALK"), // https://developers.dingtalk.com/document/app/obtain-identity-credentials
;
public static final int[] ARRAYS = Arrays.stream(values()).mapToInt(SysUserSocialTypeEnum::getType).toArray();

11
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/service/auth/SysAuthService.java
View File

@ -1,5 +1,6 @@
package cn.iocoder.yudao.adminserver.modules.system.service.auth;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthThirdLoginReqVO;
import cn.iocoder.yudao.framework.security.core.service.SecurityAuthFrameworkService;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthLoginReqVO;
@ -22,4 +23,14 @@ public interface SysAuthService extends SecurityAuthFrameworkService {
*/
String login(SysAuthLoginReqVO reqVO, String userIp, String userAgent);
/**
* 三方登陆用户，使用 code 授权码
*
* @param reqVO 登陆信息
* @param userIp 用户 IP
* @param userAgent 用户 UA
* @return 身份令牌，使用 JWT 方式
*/
String thirdLogin(SysAuthThirdLoginReqVO reqVO, String userIp, String userAgent);
}

30
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/service/auth/impl/SysAuthServiceImpl.java
View File

@ -1,7 +1,11 @@
package cn.iocoder.yudao.adminserver.modules.system.service.auth.impl;
import cn.hutool.json.JSONUtil;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthThirdLoginReqVO;
import cn.iocoder.yudao.adminserver.modules.system.enums.user.SysUserSocialTypeEnum;
import cn.iocoder.yudao.framework.common.enums.CommonStatusEnum;
import cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil;
import cn.iocoder.yudao.framework.common.util.json.JsonUtils;
import cn.iocoder.yudao.framework.security.core.LoginUser;
import cn.iocoder.yudao.framework.common.util.monitor.TracerUtils;
import cn.iocoder.yudao.adminserver.modules.system.controller.auth.vo.auth.SysAuthLoginReqVO;
@ -17,7 +21,12 @@ import cn.iocoder.yudao.adminserver.modules.system.service.logger.SysLoginLogSer
import cn.iocoder.yudao.adminserver.modules.system.service.permission.SysPermissionService;
import cn.iocoder.yudao.adminserver.modules.system.service.user.SysUserService;
import cn.iocoder.yudao.framework.common.util.servlet.ServletUtils;
import com.xkcoding.justauth.AuthRequestFactory;
import lombok.extern.slf4j.Slf4j;
import me.zhyd.oauth.model.AuthCallback;
import me.zhyd.oauth.model.AuthResponse;
import me.zhyd.oauth.model.AuthUser;
import me.zhyd.oauth.request.AuthRequest;
import org.springframework.context.annotation.Lazy;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.BadCredentialsException;
@ -60,6 +69,9 @@ public class SysAuthServiceImpl implements SysAuthService {
@Resource
private SysUserSessionService userSessionService;
@Resource
private AuthRequestFactory authRequestFactory;
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
// 获取 username 对应的 SysUserDO
@ -97,6 +109,24 @@ public class SysAuthServiceImpl implements SysAuthService {
return userSessionService.createUserSession(loginUser, userIp, userAgent);
}
@Override
public String thirdLogin(SysAuthThirdLoginReqVO reqVO, String userIp, String userAgent) {
// 使用 code 授权码，进行登陆
AuthRequest authRequest = authRequestFactory.get(SysUserSocialTypeEnum.valueOfType(reqVO.getType()).getSource());
AuthCallback authCallback = SysAuthConvert.INSTANCE.convert(reqVO);
AuthResponse<?> authResponse = authRequest.login(authCallback);
log.info("[thirdLogin][请求三方平台 type({}) request({}) response({})]", reqVO.getType(), JsonUtils.toJsonString(authCallback),
JsonUtils.toJsonString(authResponse));
if (!authResponse.ok()) {
throw new RuntimeException(""); // TODO 芋艿：补全
}
AuthUser authUser = (AuthUser) authResponse.getData();
// 查找到对应的
return null;
}
private void verifyCaptcha(String username, String captchaUUID, String captchaCode) {
String code = captchaService.getCaptchaCode(captchaUUID);
// 验证码不存在

6
yudao-admin-server/src/main/resources/application-local.yaml
View File

@ -173,8 +173,12 @@ justauth:
type:
GITEE:
client-id: 6bb0b37a8a017e5e2dc4c34ca4756dcf80e8e392585e7035d3ede7a6db50426e
client-secret: f117b9de5e9267bcd48db83d4cb078ea8cf9a5d17cda83481e3d9090df3fa01d
client-secret: ba9f1f42e77be71f461b54da83b6f4b45a052dd7f93418f00f91f4e6934dfd1f
ignore-check-redirect-uri: true
# redirect-uri: http://127.0.0.1:48080/api/gitee/callback
DINGTALK:
client-id: dingvrnreaje3yqvzhxg
client-secret: i8E6iZyDvZj51JIb0tYsYfVQYOks9Cq1lgryEjFRqC79P3iJcrxEwT6Qk2QvLrLI
ignore-check-redirect-uri: true
cache:
type: default

17
yudao-admin-ui/src/api/login.js
View File

@ -39,18 +39,23 @@ export function getCodeImg() {
})
}
// 接入第三方登录
export function oAuthLogin(type, redirectUri) {
// 三方登陆的跳转
export function thirdLoginRedirect(type, redirectUri) {
return request({
url: '/third-login-redirect?type=' + type + '&redirectUri=' + redirectUri,
method: 'get'
})
}
export function getToken(path) {
console.log({path});
// 三方登陆，使用 code 授权码
export function thirdLogin(type, code, state) {
return request({
url: '/auth2/login/github' + path,
method: 'get'
url: '/third-login',
method: 'post',
data: {
type,
code,
state
}
})
}

2
yudao-admin-ui/src/permission.js
View File

@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
const whiteList = ['/login', '/third-login', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
router.beforeEach((to, from, next) => {
NProgress.start()

4
yudao-admin-ui/src/router/index.js
View File

@ -44,8 +44,8 @@ export const constantRoutes = [
hidden: true
},
{
path: '/oauthLogin/gitee',
component: (resolve) => require(['@/views/oauthLogin'], resolve),
path: '/third-login',
component: (resolve) => require(['@/views/thirdLogin'], resolve),
hidden: true
},
{

8
yudao-admin-ui/src/utils/constants.js
View File

@ -66,3 +66,11 @@ export const InfApiErrorLogProcessStatusEnum = {
DONE: 1, // 已处理
IGNORE: 2, // 已忽略
}
/**
* 用户的三方平台的类型枚举
*/
export const SysUserSocialTypeEnum = {
GITEE: 10,
DINGTALK: 20,
}

20
yudao-admin-ui/src/views/login.vue
View File

@ -45,7 +45,7 @@
</template>
<script>
import { getCodeImg,oAuthLogin } from "@/api/login";
import { getCodeImg,thirdLoginRedirect } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
@ -54,7 +54,6 @@ export default {
data() {
return {
codeUrl: "",
cookiePassword: "",
loginForm: {
username: "admin",
password: "admin123",
@ -68,13 +67,10 @@ export default {
source: "gitee",
type: 10
}, {
img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.2/wechat.png",
title: "微信",
source: "weixin"
}, {
img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.2/qq.png",
title: "QQ",
source: "qq"
img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.2/dingtalk.png",
title: "钉钉",
source: "dingtalk",
type: 20
}
],
loginRules: {
@ -147,9 +143,11 @@ export default {
// 设置登陆中
this.loading = true;
// 计算 redirectUri
const redirectUri = location.origin + '/third-login';
// const redirectUri = location.origin + '/third-login';
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
// 进行跳转
oAuthLogin(provider.type, redirectUri).then((res) => {
thirdLoginRedirect(provider.type, redirectUri).then((res) => {
// console.log(res.url);
window.location.href = res.data;
});

18
yudao-admin-ui/src/views/oauthLogin.vue
View File

@ -1,18 +0,0 @@
<template>
</template>
<script>
import { setToken } from '@/utils/auth'
export default {
created() {
const {token} = this.$route.query;
setToken(token);
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
},
}
</script>
<style>
</style>

173
yudao-admin-ui/src/views/thirdLogin.vue Normal file
View File

@ -0,0 +1,173 @@
<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>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2020-2021 iocoder.cn All Rights Reserved.</span>
</div>
</div>
</template>
<script>
import { thirdLogin } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
name: "ThirdLogin",
data() {
return {
loginForm: {
username: "admin",
password: "admin123",
rememberMe: false,
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" }
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" }
],
},
loading: false,
redirect: undefined,
// 三方登陆相关
type: undefined,
code: undefined,
state: undefined,
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
this.getCookie();
// 三方登陆相关
this.type = 10;
this.code = this.$route.query.code;
this.state = this.$route.query.state;
thirdLogin(this.type, this.code, this.state).then(res => {
debugger
});
},
methods: {
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
});
}
});
}
}
};
</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;
}
</style>