login.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <template>
  2. <div class="container">
  3. <div class="logo"></div>
  4. <!-- 登录区域 -->
  5. <div class="content">
  6. <!-- 配图 -->
  7. <div class="pic"></div>
  8. <!-- 表单 -->
  9. <div class="field">
  10. <!-- [移动端]标题 -->
  11. <h2 class="mobile-title">
  12. <h3 class="title">芋道后台管理系统</h3>
  13. </h2>
  14. <!-- 表单 -->
  15. <!-- 表单 -->
  16. <div class="form-cont">
  17. <el-tabs class="form" v-model="loginForm.loginType" style=" float:none;">
  18. <el-tab-pane label="账号密码登录" name="uname">
  19. </el-tab-pane>
  20. <el-tab-pane label="短信验证码登录" name="sms">
  21. </el-tab-pane>
  22. </el-tabs>
  23. <div>
  24. <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
  25. <el-form-item prop="tenantName" v-if="tenantEnable">
  26. <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
  27. <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
  28. </el-input>
  29. </el-form-item>
  30. <el-form-item prop="username" v-if="loginForm.loginType=='uname'">
  31. <el-input
  32. v-model="loginForm.username"
  33. type="text"
  34. auto-complete="off"
  35. placeholder="账号"
  36. >
  37. <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
  38. </el-input>
  39. </el-form-item>
  40. <el-form-item prop="password" v-if="loginForm.loginType=='uname'">
  41. <el-input
  42. v-model="loginForm.password"
  43. type="password"
  44. auto-complete="off"
  45. placeholder="密码"
  46. @keyup.enter.native="handleLogin"
  47. >
  48. <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
  49. </el-input>
  50. </el-form-item>
  51. <el-form-item prop="mobile" v-if="loginForm.loginType=='sms'">
  52. <el-input v-model="loginForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号">
  53. <svg-icon slot="prefix" icon-class="phone" class="el-input__icon input-icon" />
  54. </el-input>
  55. </el-form-item>
  56. <el-form-item prop="mobileCode" v-if="loginForm.loginType=='sms'">
  57. <el-input v-model="loginForm.mobileCode" type="text" auto-complete="off" @keyup.enter.native="handleLogin" placeholder="短信验证码">
  58. <template slot="icon">
  59. <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
  60. </template>
  61. <template slot="append">
  62. <span v-if="mobileCodeTimer<=0" class="getMobileCode" @click="getSmsCode" style="cursor: pointer;">获取验证码</span>
  63. <span v-if="mobileCodeTimer>0" class="getMobileCode">{{mobileCodeTimer}}秒后可重新获取</span>
  64. </template>
  65. </el-input>
  66. </el-form-item>
  67. <el-form-item prop="code" v-if="captchaEnable">
  68. <el-input
  69. v-model="loginForm.code"
  70. auto-complete="off"
  71. placeholder="验证码"
  72. style="width: 63%"
  73. @keyup.enter.native="handleLogin"
  74. >
  75. <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
  76. </el-input>
  77. <div class="login-code">
  78. <img :src="codeUrl" @click="getCode" class="login-code-img"/>
  79. </div>
  80. </el-form-item>
  81. <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
  82. <el-form-item style="width:100%;">
  83. <el-button
  84. :loading="loading"
  85. size="medium"
  86. type="primary"
  87. style="width:100%;"
  88. @click.native.prevent="handleLogin"
  89. >
  90. <span v-if="!loading">登 录</span>
  91. <span v-else>登 录 中...</span>
  92. </el-button>
  93. </el-form-item>
  94. </el-form>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- footer -->
  100. <div class="footer">
  101. Copyright © 2020-2021 iocoder.cn All Rights Reserved.
  102. </div>
  103. </div>
  104. </template>
  105. <script>
  106. import { getCodeImg,socialAuthRedirect ,sendLoginSmsCode} from "@/api/login";
  107. import { getTenantIdByName } from "@/api/system/tenant";
  108. import Cookies from "js-cookie";
  109. import { encrypt, decrypt } from '@/utils/jsencrypt'
  110. import {SystemUserSocialTypeEnum} from "@/utils/constants";
  111. import { getTenantEnable } from "@/utils/ruoyi";
  112. export default {
  113. name: "Login",
  114. data() {
  115. return {
  116. codeUrl: "",
  117. captchaEnable: true,
  118. tenantEnable: true,
  119. mobileCodeTimer:0,
  120. loginForm: {
  121. loginType:"sms",
  122. username: "admin",
  123. password: "admin123",
  124. mobile:"",
  125. mobileCode:"",
  126. rememberMe: false,
  127. code: "",
  128. uuid: "",
  129. tenantName: "芋道源码",
  130. },
  131. scene:21,
  132. LoginRules:{
  133. username: [
  134. { required: true, trigger: "blur", message: "用户名不能为空" }
  135. ],
  136. password: [
  137. { required: true, trigger: "blur", message: "密码不能为空" }
  138. ],
  139. code: [{ required: true, trigger: "change", message: "验证码不能为空" }],
  140. mobile: [
  141. { required: true, trigger: "blur", message: "手机号不能为空" },
  142. {validator: function(rule, value, callback) {
  143. if (/^1[34578]\d{9}$/.test(value) == false) {
  144. callback(new Error("手机号格式错误"));
  145. } else {
  146. callback();
  147. }
  148. }, trigger: "blur"
  149. }
  150. ],
  151. tenantName:[
  152. { required: true, trigger: "blur", message: "租户不能为空" },
  153. {
  154. validator: (rule, value, callback) => {
  155. // debugger
  156. getTenantIdByName(value).then(res => {
  157. const tenantId = res.data;
  158. if (tenantId && tenantId >= 0) {
  159. // 设置租户
  160. Cookies.set("tenantId", tenantId);
  161. callback();
  162. } else {
  163. callback('租户不存在');
  164. }
  165. });
  166. },
  167. trigger: 'blur'
  168. }
  169. ]
  170. },
  171. loading: false,
  172. redirect: undefined,
  173. // 枚举
  174. SysUserSocialTypeEnum: SystemUserSocialTypeEnum,
  175. };
  176. },
  177. // watch: {
  178. // $route: {
  179. // handler: function(route) {
  180. // this.redirect = route.query && route.query.redirect;
  181. // },
  182. // immediate: true
  183. // }
  184. // },
  185. created() {
  186. // 租户开关
  187. this.tenantEnable = getTenantEnable();
  188. // 重定向地址
  189. this.redirect = this.$route.query.redirect;
  190. this.getCode();
  191. this.getCookie();
  192. },
  193. methods: {
  194. getCode() {
  195. // 只有开启的状态,才加载验证码。默认开启
  196. if (!this.captchaEnable) {
  197. return;
  198. }
  199. // 请求远程,获得验证码
  200. getCodeImg().then(res => {
  201. res = res.data;
  202. this.captchaEnable = res.enable;
  203. if (this.captchaEnable) {
  204. this.codeUrl = "data:image/gif;base64," + res.img;
  205. this.loginForm.uuid = res.uuid;
  206. }
  207. });
  208. },
  209. getCookie() {
  210. const username = Cookies.get("username");
  211. const password = Cookies.get("password");
  212. const rememberMe = Cookies.get('rememberMe')
  213. const tenantName = Cookies.get('tenantName');
  214. const mobile = Cookies.get('mobile');
  215. const mobileCode = Cookies.get('mobileCode');
  216. const loginType = Cookies.get('loginType');
  217. this.loginForm = {
  218. username: username === undefined ? this.loginForm.username : username,
  219. password: password === undefined ? this.loginForm.password : decrypt(password),
  220. rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  221. tenantName: tenantName === undefined ? this.loginForm.tenantName : tenantName,
  222. mobile:mobile === undefined ? this.loginForm.mobile : mobile,
  223. mobileCode:mobileCode === undefined ? this.loginForm.mobileCode : mobileCode,
  224. loginType:loginType === undefined ? this.loginForm.loginType : loginType,
  225. };
  226. },
  227. handleLogin() {
  228. this.$refs.loginForm.validate(valid => {
  229. if (valid) {
  230. this.loading = true;
  231. // 设置 Cookie
  232. if (this.loginForm.rememberMe) {
  233. Cookies.set("username", this.loginForm.username, { expires: 30 });
  234. Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
  235. Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
  236. Cookies.set('tenantName', this.loginForm.tenantName, { expires: 30 });
  237. } else {
  238. Cookies.remove("username");
  239. Cookies.remove("password");
  240. Cookies.remove('rememberMe');
  241. Cookies.remove('tenantName');
  242. }
  243. // 发起登陆
  244. console.log("发起登录",this.loginForm);
  245. this.$store.dispatch(this.loginForm.loginType=="sms"?"SmsLogin":"Login", this.loginForm).then(() => {
  246. this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
  247. }).catch(() => {
  248. this.loading = false;
  249. this.getCode();
  250. });
  251. }
  252. });
  253. },
  254. doSocialLogin(socialTypeEnum) {
  255. // console.log("开始Oauth登录...%o", socialTypeEnum.code);
  256. // 设置登录中
  257. this.loading = true;
  258. // 计算 redirectUri
  259. const redirectUri = location.origin + '/social-login?type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/"); // 重定向不能丢
  260. // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
  261. // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
  262. // 进行跳转
  263. socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => {
  264. // console.log(res.url);
  265. window.location.href = res.data;
  266. });
  267. },
  268. /**以下为升级短信登录 */
  269. changeLoginType(){
  270. },
  271. getSmsCode(){
  272. if(this.mobileCodeTimer>0) return;
  273. this.$refs.loginForm.validate(valid => {
  274. if(!valid) return;
  275. var _this=this;
  276. sendLoginSmsCode(this.loginForm.mobile,this.scene,this.loginForm.uuid,this.loginForm.code).then(res => {
  277. this.$modal.msgSuccess("获取验证码成功")
  278. this.mobileCodeTimer=60;
  279. var msgTimer = setInterval(function(){
  280. _this.mobileCodeTimer=_this.mobileCodeTimer-1;
  281. if(_this.mobileCodeTimer<=0){
  282. clearInterval(msgTimer);
  283. }
  284. },1000);
  285. });
  286. });
  287. }
  288. }
  289. };
  290. </script>
  291. <style lang="scss" scoped>
  292. @import "~@/assets/styles/login.scss";
  293. </style>