登录--vue
<template>
<section class="login">
<div class="login-content">
<div class="login-inner">
<div class="login-inner-left">
<img src="../../assets/images/login/icons.png" />
</div>
<div class="login-inner-right">
<div class="logo">
<img src="../../assets/images/login/logo.png" />
<div>外包管理平台</div>
</div>
<div class="login-title">Hi～</div>
<div class="login-title">欢迎使用软件工厂外包系统</div>
<el-form
ref="loginForm"
:rules="rules"
:model="loginForm"
label-width="0px"
>
<el-form-item prop="username">
<el-input
class="input-class"
v-model.trim="loginForm.username"
placeholder="请输入用户名"
>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
class="input-class"
:type="'password'"
@keyup.enter.native="login"
v-model="loginForm.password"
placeholder="请输入密码"
>
</el-input>
</el-form-item>
</el-form>
<el-row class="operation">
<el-col align="left" :span="12">
<el-checkbox v-model="remenber"> </el-checkbox
><span style="padding-left: 5px">记住密码</span>
</el-col>
<el-col align="right" :span="12"> 忘记密码 </el-col>
</el-row>
<el-button
:loading="loading"
class="login-btn"
type="primary"
@click="login"
>登 录</el-button
>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapMutations } from 'vuex'
const Base64 = require('js-base64').Base64
import { loginInter, getUserInfoInter, getMenuNavInter } from '@/server/common'
export default {
name: 'login',
components: {},
data() {
return {
loading: false,
remenber: true,
loginForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
created() {
// 在页面加载时从cookie获取登录信息
let username = this.$db.ls.get('username')
let password = this.$db.ls.get('password')
if (password) {
password = Base64.decode(password)
}
// 如果存在赋值给表单，并且将记住密码勾选
if (username) {
this.loginForm.username = username
this.loginForm.password = password
this.remenber = true
}
},
methods: {
...mapMutations([
'changeUserInfo',
'changeMenuList',
'changePermissionList'
]),
// 储存表单信息
setUserInfo: function () {
if (this.remenber) {
// base64加密密码
let password = Base64.encode(this.loginForm.password)
this.$db.ls.set('password', password)
this.$db.ls.set('username', this.loginForm.username)
} else {
this.$db.ls.clear()
}
},
login() {
this.$refs.loginForm.validate(async (valid) => {
if (valid) {
this.loading = true
let params = {
username: this.loginForm.username,
password: this.loginForm.password
}
const { code, token, msg } = await loginInter(params)
if (code === 0) {
this.$db.ss.set('token', token)
this.getUserInfo()
} else {
this.$message({
message: msg,
type: 'error'
})
this.loading = false
}
}
})
},
async getUserInfo() {
const { code, user } = await getUserInfoInter()
const { code: code1, menuList, permissions } = await getMenuNavInter()
if (code === 0) {
this.changeUserInfo(user)
this.setUserInfo()
}
if (code1 === 0) {
this.$db.ss.set('menuList', menuList)
this.$db.ss.set('permissionList', permissions)
this.changePermissionList(permissions)
this.changeMenuList(menuList)
}
if (this.$route.query.redirect) {
this.$router.push({
path: decodeURIComponent(this.$route.query.redirect)
})
} else {
this.$router.push('/index') //正常登录流程进入的页面
}
}
}
}
</script>
