renguanyu111
4 years ago
11 changed files with 485 additions and 37 deletions
@ -0,0 +1,151 @@ |
|||
import { login, getUserInfo, setUserInfo,mylogin } from '@/api/user' |
|||
import { jsonInBlacklist } from '@/api/jwt' |
|||
import router from '@/router/index' |
|||
import { ElMessage } from 'element-plus' |
|||
|
|||
export const user = { |
|||
namespaced: true, |
|||
state: { |
|||
userInfo: { |
|||
uuid: '', |
|||
nickName: '', |
|||
headerImg: '', |
|||
authority: {}, |
|||
sideMode: 'dark', |
|||
activeColor: '#4D70FF', |
|||
baseColor: '#fff' |
|||
}, |
|||
token: '', |
|||
}, |
|||
mutations: { |
|||
setUserInfo(state, userInfo) { |
|||
// 这里的 `state` 对象是模块的局部状态
|
|||
state.userInfo = userInfo |
|||
}, |
|||
setToken(state, token) { |
|||
// 这里的 `state` 对象是模块的局部状态
|
|||
state.token = token |
|||
}, |
|||
NeedInit(state) { |
|||
state.userInfo = {} |
|||
state.token = '' |
|||
sessionStorage.clear() |
|||
router.push({ name: 'Init', replace: true }) |
|||
}, |
|||
LoginOut(state) { |
|||
state.userInfo = {} |
|||
state.token = '' |
|||
sessionStorage.clear() |
|||
router.push({ name: 'Login', replace: true }) |
|||
window.location.reload() |
|||
}, |
|||
ResetUserInfo(state, userInfo = {}) { |
|||
state.userInfo = { ...state.userInfo, |
|||
...userInfo |
|||
} |
|||
}, |
|||
ChangeSideMode: (state, val) => { |
|||
state.userInfo.sideMode = val |
|||
}, |
|||
}, |
|||
actions: { |
|||
async GetUserInfo({ commit }) { |
|||
const res = await getUserInfo() |
|||
if (res.code === 0) { |
|||
commit('setUserInfo', res.data.userInfo) |
|||
} |
|||
return res |
|||
}, |
|||
async LoginIn({ commit, dispatch, rootGetters, getters }, loginInfo) { |
|||
const res = await login(loginInfo) |
|||
if (res.code === 0) { |
|||
commit('setUserInfo', res.data.user) |
|||
commit('setToken', res.data.token) |
|||
await dispatch('router/SetAsyncRouter', {}, { root: true }) |
|||
const asyncRouters = rootGetters['router/asyncRouters'] |
|||
asyncRouters.forEach(asyncRouter => { |
|||
router.addRoute(asyncRouter) |
|||
}) |
|||
// const redirect = router.history.current.query.redirect
|
|||
// console.log(redirect)
|
|||
// if (redirect) {
|
|||
// router.push({ path: redirect })
|
|||
// } else {
|
|||
router.push({ name: getters['userInfo'].authority.defaultRouter }) |
|||
// }
|
|||
return true |
|||
} |
|||
}, |
|||
async myLoginIn({ commit, dispatch, rootGetters, getters }, loginInfo) { |
|||
const res = await mylogin(loginInfo) |
|||
if (res.code === 0) { |
|||
commit('setUserInfo', res.data.user) |
|||
commit('setToken', res.data.token) |
|||
await dispatch('router/SetAsyncRouter', {}, { root: true }) |
|||
const asyncRouters = rootGetters['router/asyncRouters'] |
|||
asyncRouters.forEach(asyncRouter => { |
|||
router.addRoute(asyncRouter) |
|||
}) |
|||
// const redirect = router.history.current.query.redirect
|
|||
// console.log(redirect)
|
|||
// if (redirect) {
|
|||
// router.push({ path: redirect })
|
|||
// } else {
|
|||
router.push({ name: getters['userInfo'].authority.defaultRouter }) |
|||
// }
|
|||
return true |
|||
} |
|||
}, |
|||
async LoginOut({ commit }) { |
|||
const res = await jsonInBlacklist() |
|||
if (res.code === 0) { |
|||
commit('LoginOut') |
|||
} |
|||
}, |
|||
async changeSideMode({ commit, state }, data) { |
|||
const res = await setUserInfo({ sideMode: data, ID: state.userInfo.ID }) |
|||
if (res.code === 0) { |
|||
commit('ChangeSideMode', data) |
|||
ElMessage({ |
|||
type: 'success', |
|||
message: '设置成功' |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
getters: { |
|||
userInfo(state) { |
|||
return state.userInfo |
|||
}, |
|||
token(state) { |
|||
return state.token |
|||
}, |
|||
mode(state) { |
|||
return state.userInfo.sideMode |
|||
}, |
|||
sideMode(state) { |
|||
if (state.userInfo.sideMode === 'dark') { |
|||
return '#191a23' |
|||
} else if (state.userInfo.sideMode === 'light') { |
|||
return '#fff' |
|||
} else { |
|||
return state.userInfo.sideMode |
|||
} |
|||
}, |
|||
baseColor(state) { |
|||
if (state.userInfo.sideMode === 'dark') { |
|||
return '#fff' |
|||
} else if (state.userInfo.sideMode === 'light') { |
|||
return '#191a23' |
|||
} else { |
|||
return state.userInfo.baseColor |
|||
} |
|||
}, |
|||
activeColor(state) { |
|||
if (state.userInfo.sideMode === 'dark' || state.userInfo.sideMode === 'light') { |
|||
return '#4D70FF' |
|||
} |
|||
return state.userInfo.activeColor |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,203 @@ |
|||
<template> |
|||
<div id="userLayout"> |
|||
<div class="login_panle"> |
|||
<div class="login_panle_form"> |
|||
<div class="login_panle_form_title"> |
|||
<!-- <img |
|||
class="login_panle_form_title_logo" |
|||
:src="$GIN_VUE_ADMIN.appLogo" |
|||
alt |
|||
/> --> |
|||
<p class="login_panle_form_title_p">{{ $GIN_VUE_ADMIN.appName }}后台管理系统</p> |
|||
</div> |
|||
<el-form |
|||
ref="loginForm" |
|||
:model="loginForm" |
|||
:rules="rules" |
|||
@keyup.enter="submitForm" |
|||
> |
|||
<el-form-item prop="username"> |
|||
<el-input v-model="loginForm.username" placeholder="请输入用户名"> |
|||
<template #suffix> |
|||
<i class="el-input__icon el-icon-user" /> |
|||
</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<el-input |
|||
v-model="loginForm.password" |
|||
:type="lock === 'lock' ? 'password' : 'text'" |
|||
placeholder="请输入密码" |
|||
> |
|||
<template #suffix> |
|||
<i |
|||
:class="'el-input__icon el-icon-' + lock" |
|||
@click="changeLock" |
|||
/> |
|||
</template> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item style="position: relative" prop="captcha"> |
|||
<el-input |
|||
v-model="loginForm.captcha" |
|||
name="logVerify" |
|||
placeholder="请输入验证码" |
|||
style="width: 60%" |
|||
/> |
|||
<div class="vPic"> |
|||
<img |
|||
v-if="picPath" |
|||
:src="picPath" |
|||
alt="请输入验证码" |
|||
@click="loginVerify()" |
|||
/> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<!-- <el-button type="primary" style="width: 46%" @click="checkInit" |
|||
>前往初始化</el-button |
|||
> --> |
|||
<!-- <el-button type="primary" style="width: 46%" @click="goUser" |
|||
>前往用户端登录</el-button |
|||
> --> |
|||
<el-button |
|||
type="primary" |
|||
style="width: 46%; margin-left: 25%" |
|||
@click="submitForm" |
|||
>登 录</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="login_panle_right" /> |
|||
<!-- <div class="login_panle_foot"> |
|||
<div class="links"> |
|||
<a href="http://doc.henrongyi.top/"> |
|||
<img src="@/assets/docs.png" class="link-icon" /> |
|||
</a> |
|||
<a href="https://www.yuque.com/flipped-aurora/"> |
|||
<img src="@/assets/yuque.png" class="link-icon" /> |
|||
</a> |
|||
<a href="https://github.com/flipped-aurora/gin-vue-admin"> |
|||
<img src="@/assets/github.png" class="link-icon" /> |
|||
</a> |
|||
<a href="https://space.bilibili.com/322210472"> |
|||
<img src="@/assets/video.png" class="link-icon" /> |
|||
</a> |
|||
</div> |
|||
<div class="copyright"> |
|||
Copyright © {{ curYear }} 💖 flipped-aurora |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { mapActions } from 'vuex' |
|||
import { captcha } from '@/api/user' |
|||
import { checkDB } from '@/api/initdb' |
|||
export default { |
|||
name: 'Login', |
|||
data() { |
|||
const checkUsername = (rule, value, callback) => { |
|||
if (value.length < 5) { |
|||
return callback(new Error('请输入正确的用户名')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
const checkPassword = (rule, value, callback) => { |
|||
if (value.length < 6) { |
|||
return callback(new Error('请输入正确的密码')) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
return { |
|||
curYear: 0, |
|||
lock: 'lock', |
|||
loginForm: { |
|||
username: 'admin', |
|||
password: '123456', |
|||
captcha: '', |
|||
captchaId: '' |
|||
}, |
|||
rules: { |
|||
username: [{ validator: checkUsername, trigger: 'blur' }], |
|||
password: [{ validator: checkPassword, trigger: 'blur' }], |
|||
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }, |
|||
{ |
|||
min: 5, |
|||
max: 6, |
|||
message: '验证码格式不正确', |
|||
trigger: 'blur', |
|||
}] |
|||
}, |
|||
logVerify: '', |
|||
picPath: '' |
|||
} |
|||
}, |
|||
created() { |
|||
this.loginVerify() |
|||
this.curYear = new Date().getFullYear() |
|||
}, |
|||
methods: { |
|||
...mapActions('user', ['LoginIn']), |
|||
goUser(){ |
|||
this.$router.push({ name: 'Userlogin' }) |
|||
}, |
|||
async checkInit() { |
|||
const res = await checkDB() |
|||
if (res.code === 0) { |
|||
if (res.data?.needInit) { |
|||
this.$store.commit('user/NeedInit') |
|||
this.$router.push({ name: 'Init' }) |
|||
} else { |
|||
this.$message({ |
|||
type: 'info', |
|||
message: '已配置数据库信息，无法初始化' |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
async login() { |
|||
return await this.LoginIn(this.loginForm) |
|||
}, |
|||
async submitForm() { |
|||
this.$refs.loginForm.validate(async(v) => { |
|||
if (v) { |
|||
const flag = await this.login() |
|||
if (!flag) { |
|||
this.loginVerify() |
|||
} |
|||
} else { |
|||
this.$message({ |
|||
type: 'error', |
|||
message: '请正确填写登录信息', |
|||
showClose: true |
|||
}) |
|||
this.loginVerify() |
|||
return false |
|||
} |
|||
}) |
|||
}, |
|||
changeLock() { |
|||
this.lock = this.lock === 'lock' ? 'unlock' : 'lock' |
|||
}, |
|||
loginVerify() { |
|||
captcha({}).then((ele) => { |
|||
this.picPath = ele.data.picPath |
|||
this.loginForm.captchaId = ele.data.captchaId |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
|
|||
|
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/style/newLogin.scss"; |
|||
</style> |
|||
Loading…
Reference in new issue