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> <style lang="scss" scoped> .login { height: calc(100vh); background-image: url(../../assets/images/login/bg1.png); background-repeat: no-repeat; background-size: 100% 100%;
.login-content { padding: 50px; width: 65%; height: 500px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url(../../assets/images/login/bg2.png); background-repeat: no-repeat; background-size: 100% 100%; .login-inner { display: flex; padding: 50px 80px; padding-top: 0px; align-items: flex-end; .login-inner-left { padding: 30px 10px; width: 65%; img { width: 100%; } } .login-inner-right { padding-right: 40px; width: 30%; .logo { display: flex; justify-content: start; align-items: center; font-size: 18px; font-weight: 500; color: #1a185b; margin-bottom: 20px; img { width: 35px; height: 35px; margin-right: 10px; } } .login-title { text-align: left; font-size: 20px; color: #1a185b; // padding: 10px 0 50px 0; padding: 10px 0 4px 0; font-weight: 500; } .el-form { margin-top: 30px; } .input-class { ::v-deep .el-input__inner { border: 1px solid transparent; background: rgba(114, 125, 255, 0.2); color: #888; } } .operation { padding: 20px 10px; font-size: 12px; color: #1a185b; } } } } .login-btn { margin-top: 20px; width: 100% !important; } } </style>
<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> <style lang="scss" scoped> .login { height: calc(100vh); background-image: url(../../assets/images/login/bg1.png); background-repeat: no-repeat; background-size: 100% 100%;
.login-content { padding: 50px; width: 65%; height: 500px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url(../../assets/images/login/bg2.png); background-repeat: no-repeat; background-size: 100% 100%; .login-inner { display: flex; padding: 50px 80px; padding-top: 0px; align-items: flex-end; .login-inner-left { padding: 30px 10px; width: 65%; img { width: 100%; } } .login-inner-right { padding-right: 40px; width: 30%; .logo { display: flex; justify-content: start; align-items: center; font-size: 18px; font-weight: 500; color: #1a185b; margin-bottom: 20px; img { width: 35px; height: 35px; margin-right: 10px; } } .login-title { text-align: left; font-size: 20px; color: #1a185b; // padding: 10px 0 50px 0; padding: 10px 0 4px 0; font-weight: 500; } .el-form { margin-top: 30px; } .input-class { ::v-deep .el-input__inner { border: 1px solid transparent; background: rgba(114, 125, 255, 0.2); color: #888; } } .operation { padding: 20px 10px; font-size: 12px; color: #1a185b; } } } } .login-btn { margin-top: 20px; width: 100% !important; } } </style>
标签：username,vue,登录,--,db,padding,login,password,loginForm 来源： https://www.cnblogs.com/bwnnxxx123/p/15635973.html