登录--vue

本文主要是介绍登录--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">&nbsp;</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>

这篇关于登录--vue的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！