account.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <script lang="ts">
  2. import { computed, defineComponent, onMounted, reactive, ref, toRefs, onUnmounted } from 'vue'
  3. import { useRoute, useRouter } from 'vue-router'
  4. import { ElMessage, FormRules } from 'element-plus'
  5. import { useI18n } from 'vue-i18n'
  6. import Cookies from 'js-cookie'
  7. import { storeToRefs } from 'pinia'
  8. import { useThemeConfig } from '/@/stores/themeConfig'
  9. import { initFrontEndControlRoutes } from '/@/router/frontEnd'
  10. import { initBackEndControlRoutes } from '/@/router/backEnd'
  11. import { Session } from '/@/utils/storage'
  12. import { formatAxis } from '/@/utils/formatTime'
  13. import { NextLoading } from '/@/utils/loading'
  14. import * as loginApi from '/@/views/system/login/api'
  15. import { useUserInfo } from '/@/stores/userInfo'
  16. import { DictionaryStore } from '/@/stores/dictionary'
  17. import { SystemConfigStore } from '/@/stores/systemConfig'
  18. import { Md5 } from 'ts-md5'
  19. import { errorMessage } from '/@/utils/message'
  20. import emitter from '/@/utils/emitter'
  21. export default defineComponent({
  22. name: 'loginAccount',
  23. setup() {
  24. const { t } = useI18n()
  25. const storesThemeConfig = useThemeConfig()
  26. const { themeConfig } = storeToRefs(storesThemeConfig)
  27. const { userInfos } = storeToRefs(useUserInfo())
  28. const route = useRoute()
  29. const router = useRouter()
  30. const state = reactive({
  31. isShowPassword: false,
  32. ruleForm: {
  33. username: '',
  34. password: '',
  35. captcha: '',
  36. captchaKey: '',
  37. captchaImgBase: '',
  38. },
  39. loading: {
  40. signIn: false,
  41. },
  42. })
  43. const rules = reactive<FormRules>({
  44. username: [{ required: true, message: '请填写账号', trigger: 'blur' }],
  45. password: [
  46. {
  47. required: true,
  48. message: '请填写密码',
  49. trigger: 'blur',
  50. },
  51. ],
  52. captcha: [
  53. {
  54. required: true,
  55. message: '请填写验证码',
  56. trigger: 'blur',
  57. },
  58. ],
  59. })
  60. const formRef = ref()
  61. // 时间获取
  62. const currentTime = computed(() => {
  63. return formatAxis(new Date())
  64. })
  65. // 是否关闭验证码
  66. const isShowCaptcha = computed(() => {
  67. return SystemConfigStore().systemConfig['base.captcha_state']
  68. })
  69. const getCaptcha = async () => {
  70. loginApi.getCaptcha().then((ret: any) => {
  71. state.ruleForm.captchaImgBase = ret.data.image_base
  72. state.ruleForm.captchaKey = ret.data.key
  73. })
  74. }
  75. const refreshCaptcha = async () => {
  76. loginApi.getCaptcha().then((ret: any) => {
  77. state.ruleForm.captchaImgBase = ret.data.image_base
  78. state.ruleForm.captchaKey = ret.data.key
  79. })
  80. }
  81. const loginClick = async () => {
  82. if (!formRef.value) return
  83. await formRef.value.validate((valid: any) => {
  84. if (valid) {
  85. loginApi.login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) }).then((res: any) => {
  86. if (res.code === 2000) {
  87. Session.set('token', res.data.access)
  88. Cookies.set('username', res.data.name)
  89. if (!themeConfig.value.isRequestRoutes) {
  90. // 前端控制路由,2、请注意执行顺序
  91. initFrontEndControlRoutes()
  92. loginSuccess()
  93. } else {
  94. // 模拟后端控制路由,isRequestRoutes 为 true,则开启后端控制路由
  95. // 添加完动态路由,再进行 router 跳转,否则可能报错 No match found for location with path "/"
  96. initBackEndControlRoutes()
  97. // 执行完 initBackEndControlRoutes,再执行 signInSuccess
  98. loginSuccess()
  99. }
  100. } else if (res.code === 4000) {
  101. // 登录错误之后,刷新验证码
  102. refreshCaptcha()
  103. }
  104. })
  105. } else {
  106. errorMessage('请填写登录信息')
  107. }
  108. })
  109. }
  110. const getUserInfo = () => {
  111. useUserInfo().setUserInfos()
  112. }
  113. emitter.on('scan-wecomLogin', (userInfo: any) => {
  114. if (userInfo.loginInfo.code == 2000) {
  115. Session.set('token', userInfo.loginInfo.data.access)
  116. Cookies.set('username', userInfo.loginInfo.data.name)
  117. if (!themeConfig.value.isRequestRoutes) {
  118. // 前端控制路由,2、请注意执行顺序
  119. // console.log('成功获取token,开始初始化前端路由')
  120. initFrontEndControlRoutes()
  121. loginSuccess()
  122. } else {
  123. initBackEndControlRoutes()
  124. loginSuccess()
  125. }
  126. emitter.off('scan-wecomLogin')
  127. }
  128. })
  129. // 登录成功后的跳转
  130. const loginSuccess = () => {
  131. //登录成功获取用户信息,获取系统字典数据
  132. getUserInfo()
  133. //获取所有字典
  134. DictionaryStore().getSystemDictionarys()
  135. // 初始化登录成功时间问候语
  136. let currentTimeInfo = currentTime.value
  137. // 登录成功,跳到转首页
  138. // 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中
  139. if (route.query?.redirect) {
  140. router.push({
  141. path: <string>route.query?.redirect,
  142. query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
  143. })
  144. } else {
  145. router.push('/')
  146. }
  147. // 登录成功提示
  148. // 关闭 loading
  149. state.loading.signIn = true
  150. const signInText = t('message.signInText')
  151. ElMessage.success(`${currentTimeInfo},${signInText}`)
  152. // 添加 loading,防止第一次进入界面时出现短暂空白
  153. NextLoading.start()
  154. }
  155. onMounted(() => {
  156. getCaptcha()
  157. //获取系统配置
  158. SystemConfigStore().getSystemConfigs()
  159. })
  160. // onUnmounted(() => {
  161. // console.log('卸载了')
  162. // })
  163. return {
  164. refreshCaptcha,
  165. loginClick,
  166. loginSuccess,
  167. isShowCaptcha,
  168. state,
  169. formRef,
  170. rules,
  171. ...toRefs(state),
  172. }
  173. },
  174. })
  175. </script>
  176. <template>
  177. <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules">
  178. <el-form-item class="login-animation1" prop="username">
  179. <el-input
  180. @keydown.enter="loginClick"
  181. type="text"
  182. :placeholder="$t('message.account.accountPlaceholder1')"
  183. v-model="ruleForm.username"
  184. clearable
  185. autocomplete="off">
  186. <template #prefix>
  187. <el-icon class="el-input__icon">
  188. <ele-User />
  189. </el-icon>
  190. </template>
  191. </el-input>
  192. </el-form-item>
  193. <el-form-item class="login-animation2" prop="password">
  194. <el-input
  195. @keydown.enter="loginClick"
  196. :type="isShowPassword ? 'text' : 'password'"
  197. :placeholder="$t('message.account.accountPlaceholder2')"
  198. v-model="ruleForm.password">
  199. <template #prefix>
  200. <el-icon class="el-input__icon">
  201. <ele-Unlock />
  202. </el-icon>
  203. </template>
  204. <template #suffix>
  205. <i
  206. class="iconfont el-input__icon login-content-password"
  207. :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
  208. @click="isShowPassword = !isShowPassword">
  209. </i>
  210. </template>
  211. </el-input>
  212. </el-form-item>
  213. <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
  214. <el-col :span="15">
  215. <el-input
  216. type="text"
  217. maxlength="4"
  218. :placeholder="$t('message.account.accountPlaceholder3')"
  219. v-model="ruleForm.captcha"
  220. clearable
  221. autocomplete="off">
  222. <template #prefix>
  223. <el-icon class="el-input__icon">
  224. <ele-Position />
  225. </el-icon>
  226. </template>
  227. </el-input>
  228. </el-col>
  229. <el-col :span="1"></el-col>
  230. <el-col :span="8">
  231. <el-button class="login-content-captcha">
  232. <el-image :src="ruleForm.captchaImgBase" @click="refreshCaptcha" />
  233. </el-button>
  234. </el-col>
  235. </el-form-item>
  236. <el-form-item class="login-animation4">
  237. <el-button
  238. type="primary"
  239. class="login-content-submit"
  240. round
  241. @keydown.enter="loginClick"
  242. @click="loginClick"
  243. :loading="loading.signIn">
  244. <span class="font-medium">{{ $t('message.account.accountBtnText') }}</span>
  245. </el-button>
  246. <!--<el-button type="primary" class="login-content-submit" round @click="qrLoginClick"> 企业微信扫码登录</el-button>-->
  247. </el-form-item>
  248. </el-form>
  249. </template>
  250. <style scoped lang="scss">
  251. .login-content-form {
  252. margin-top: 20px;
  253. @for $i from 1 through 4 {
  254. .login-animation#{$i} {
  255. opacity: 0;
  256. animation-name: error-num;
  257. animation-duration: 0.5s;
  258. animation-fill-mode: forwards;
  259. animation-delay: calc($i/10) + s;
  260. }
  261. }
  262. .login-content-password {
  263. display: inline-block;
  264. width: 20px;
  265. cursor: pointer;
  266. &:hover {
  267. color: #909399;
  268. }
  269. }
  270. .login-content-captcha {
  271. width: 100%;
  272. padding: 0;
  273. font-weight: bold;
  274. letter-spacing: 5px;
  275. }
  276. .login-content-submit {
  277. width: 100%;
  278. letter-spacing: 2px;
  279. font-weight: 300;
  280. margin-top: 15px;
  281. }
  282. }
  283. </style>