[toc] ### 一、實現退出登錄功能 1.1 設置退出登錄接口 ``` export function logout() { return request({ url: '/admin/user/logout', method: 'post' }) } ``` ### 二、實現注冊頁面布局 2.1 刪除登錄布局默認提示的一些內容 2.2 創建注冊按鈕 ``` <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> <div> <el-button type="default" style="width:100%;margin-bottom:30px;"> 切換為注冊 </el-button> </div> ``` 2.3 修改登錄布局文字 ``` <div class="title-container"> <h3 class="title">登錄</h3> </div> placeholder="請輸入用戶名" placeholder="請輸入密碼" <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登錄</el-button> ``` 2.4 實現注冊布局和登錄注冊切換 ``` <template> <div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left"> <div class="title-container"> <h3 class="title">{{inputType == "login" ? "登錄" : "注冊"}}</h3> </div> <el-form-item prop="username"> <span class="svg-container"> <svg-icon icon-class="user" /> </span> <el-input ref="username" v-model="loginForm.username" placeholder="請輸入用戶名" name="username" type="text" tabindex="1" autocomplete="on" /> </el-form-item> <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual> <el-form-item prop="password"> <span class="svg-container"> <svg-icon icon-class="password" /> </span> <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="請輸入密碼" name="password" tabindex="2" autocomplete="on" @keyup.native="checkCapslock" @blur="capsTooltip = false" @keyup.enter.native="handleLogin" /> <span class="show-pwd" @click="showPwd"> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> </span> </el-form-item> </el-tooltip> <el-tooltip v-if="inputType == 'reg'" v-model="capsTooltip" content="Caps lock is On" placement="right" manual> <el-form-item prop="repassword"> <span class="svg-container"> <svg-icon icon-class="password" /> </span> <el-input :key="repasswordType" ref="repassword" v-model="loginForm.repassword" :type="repasswordType" placeholder="請輸入確認密碼" name="repassword" tabindex="2" autocomplete="on" @keyup.enter.native="handleLogin" /> <span class="show-pwd" @click="showRePwd"> <svg-icon :icon-class="repasswordType === 'password' ? 'eye' : 'eye-open'" /> </span> </el-form-item> </el-tooltip> <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin"> {{inputType == "login" ? "登錄" : "注冊"}} </el-button> <div> <el-button type="default" @click="inputType = inputType == 'login' ? 'reg' : 'login'" style="width:100%;margin-bottom:30px;"> {{inputType == "login" ? "切換為注冊" : "切換為登錄"}} </el-button> </div> </el-form> </div> </template> <script> import { validUsername } from '@/utils/validate' export default { name: 'Login', data() { // const validateUsername = (rule, value, callback) => { // if (!validUsername(value)) { // callback(new Error('Please enter the correct user name')) // } else { // callback() // } // } // const validatePassword = (rule, value, callback) => { // if (value.length < 6) { // callback(new Error('The password can not be less than 6 digits')) // } else { // callback() // } // } return { inputType : "login", loginForm: { username: '', password: '', repassword : "" }, passwordType: 'password', repasswordType: 'password', capsTooltip: false, loading: false, showDialog: false, redirect: undefined, otherQuery: {} } }, computed: { loginRules(){ let rules = { username: [{ required: true, trigger: 'blur', }], password: [{ required: true, trigger: 'blur', }] } if(this.inputType == "reg"){ rules.repassword = [{ required: true, trigger: 'blur', }] } return rules; } }, watch: { $route: { handler: function(route) { const query = route.query if (query) { this.redirect = query.redirect this.otherQuery = this.getOtherQuery(query) } }, immediate: true } }, created() { // window.addEventListener('storage', this.afterQRScan) }, mounted() { if (this.loginForm.username === '') { this.$refs.username.focus() } else if (this.loginForm.password === '') { this.$refs.password.focus() } }, destroyed() { // window.removeEventListener('storage', this.afterQRScan) }, methods: { checkCapslock(e) { const { key } = e this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z') }, showPwd() { if (this.passwordType === 'password') { this.passwordType = '' } else { this.passwordType = 'password' } this.$nextTick(() => { this.$refs.password.focus() }) }, showRePwd() { if (this.repasswordType === 'password') { this.repasswordType = '' } else { this.repasswordType = 'password' } this.$nextTick(() => { this.$refs.repassword.focus() }) }, handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true this.$store.dispatch('user/login', this.loginForm) .then(() => { this.$router.push({ path: "/" }) this.loading = false }) .catch(() => { this.loading = false }) } else { console.log('error submit!!') return false } }) }, getOtherQuery(query) { return Object.keys(query).reduce((acc, cur) => { if (cur !== 'redirect') { acc[cur] = query[cur] } return acc }, {}) } // afterQRScan() { // if (e.key === 'x-admin-oauth-code') { // const code = getQueryObject(e.newValue) // const codeMap = { // wechat: 'code', // tencent: 'code' // } // const type = codeMap[this.auth_type] // const codeName = code[type] // if (codeName) { // this.$store.dispatch('LoginByThirdparty', codeName).then(() => { // this.$router.push({ path: this.redirect || '/' }) // }) // } else { // alert('第三方登錄失敗') // } // } // } } } </script> ``` 2.5 實現注冊功能 2.5.1 配置注冊接口 ``` export function reg(data) { return request({ url: '/user/reg', method: 'post', data }) } ``` 2.5.2 實現注冊功能 ``` handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true if(this.inputType == "reg"){ reg(this.loginForm).then(response=>{ this.loading = false; this.$message.success("注冊成功") this.inputType = "login" this.loginForm = { username : "", password : "", repassword : "" } }).catch(error=>{ this.loading = false; }) return } this.$store.dispatch('user/login', this.loginForm) .then(() => { this.$router.push({ path: "/" }) this.loading = false }) .catch(() => { this.loading = false }) } else { console.log('error submit!!') return false } }) }, ```