如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能
更新時(shí)間：2024年01月23日 15:15:26 作者：czy陳澤宇
要實(shí)現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下
一、想要實(shí)現(xiàn)的效果
二、搭建登錄靜態(tài)
1、實(shí)現(xiàn)左邊背景和右邊登錄欄的總體布局布局：
<el-row class="content">
<!--el-col 列： -->
<el-col :span="16" :xs="0" class="content-left"></el-col>
<el-col :span="8" :xs="24" class="content-right">
<el-row>2、賬號(hào)密碼登錄和手機(jī)號(hào)碼登錄切換使用<el-tabs>組件實(shí)現(xiàn)：
3、其他省略
4、全部代碼：
<el-row class="content">
<!--el-col 列： -->
<el-col :span="16" :xs="0" class="content-left"></el-col>
<el-col :span="8" :xs="24" class="content-right">
<div class="loginContent">
<div class="loginContentTop">
<div class="header">
<div class="logo">
<img src="../assets/images/logo.png" alt="" class="image" />
</div>
<div class="fontSize">JinPiKa</div>
</div>
<span class="introduce">全球最大的代碼托管平臺(tái)</span>
</div>
<div class="loginContentForm">
<div class="loginMethods">
<el-tabs>
<el-tab-pane
label="賬號(hào)密碼登錄"
class="toLogin"
:class="{ option: !option }"
@click="toOption(0)"
>
<!-- loginForm: 表單數(shù)據(jù)對(duì)象-->
<el-form
:model="loginForm"
:rules="loginFormRules"
style="width: 208px"
>
<el-form-item label="" prop="username">
<el-input
:prefix-icon="User"
placeholder="用戶名:user"
v-model="loginForm.username"
inline-message
></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input
:prefix-icon="Lock"
placeholder="密碼:user"
show-password
v-model="loginForm.password"
inline-message
></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane
label="手機(jī)號(hào)碼登錄"
class="toLogin"
:class="{ option: !option }"
@click="toOption(0)"
>
<!-- loginForm: 表單數(shù)據(jù)對(duì)象-->
<el-form
:model="loginFormPhone"
:rules="loginFormPhoneRules"
style="width: 208px"
prop="phone"
>
<el-form-item label="">
<el-input
:prefix-icon="User"
placeholder="請(qǐng)輸入手機(jī)號(hào)"
v-model="loginFormPhone.phone"
inline-message
></el-input>
</el-form-item>
<el-form-item label="" prop="code">
<el-input
:prefix-icon="Lock"
placeholder="請(qǐng)輸入驗(yàn)證碼"
v-model="loginFormPhone.code"
inline-message
></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="loginContentButton">
<div class="buttonTop">
<el-checkbox v-model="checked" label="自動(dòng)登錄" size="small" />
<el-link type="primary" :underline="false">
<span style="font-size: 12px">忘記密碼</span>
</el-link>
</div>
<el-button type="primary" class="loginButton" @click="tologin">
登錄
</el-button>
<el-divider>
<span class="fengexian">其他登錄方式</span>
</el-divider>
<div class="svgItems">
<div class="svgItem">
<svg-icon
name="zhifubao"
width="18px"
height="18px"
color="pink"
></svg-icon>
</div>
<div class="svgItem">
<svg-icon
name="taobao"
width="18px"
height="18px"
color="pink"
></svg-icon>
</div>
<div class="svgItem">
<svg-icon
name="weibo"
width="18px"
height="18px"
color="pink"
></svg-icon>
</div>
</div>
</div>
</div>
</el-col>
</el-row>三、封裝接口
1、首先需要對(duì)axios進(jìn)行一個(gè)二次封裝，實(shí)現(xiàn)請(qǐng)求和響應(yīng)攔截器
在utils文件夾(一般用于存放封裝的文件)下創(chuàng)建一個(gè)request.ts文件
import axios from 'axios'
const requeset=axios.create({
baseURL: import.meta.env.BASE_URL, //基礎(chǔ)路徑
timeout:5000 //發(fā)請(qǐng)求超時(shí)時(shí)間為5s
})
//給request實(shí)例添加請(qǐng)求攔截器
request.interceptors.request.use((config)=>{
// config：配置對(duì)象：里面有個(gè)headers屬性請(qǐng)求頭，經(jīng)常給服務(wù)器端通過請(qǐng)求頭攜帶公共參數(shù)
return config
})
//配置響應(yīng)攔截器
request.interceptors.response.use(
//成功響應(yīng)：返回服務(wù)端的數(shù)據(jù)
(response)=>{
return response.data
},
//失敗響應(yīng)：會(huì)返回錯(cuò)誤對(duì)象，用來處理http網(wǎng)絡(luò)錯(cuò)誤
（error)=>{
// 存儲(chǔ)網(wǎng)絡(luò)錯(cuò)誤信息
let message = ''
// 根據(jù)http狀態(tài)碼判斷網(wǎng)絡(luò)錯(cuò)誤
const status = error.response.status
switch (status) {
case 401:
message = '登錄已過期，請(qǐng)重新登錄'
break
case 403:
message = '沒有權(quán)限，請(qǐng)聯(lián)系管理員'
break
case 404:
message = '請(qǐng)求資源不存在'
break
case 500:
message = '服務(wù)器內(nèi)部錯(cuò)誤'
break
default:
// eslint-disable-next-line @typescript-eslint/no-unused-vars
message = '網(wǎng)絡(luò)錯(cuò)誤'
break
}
// 提示錯(cuò)誤信息
ElMessage({
type: 'error',
message,
})
// 返回一個(gè)失敗的promise對(duì)象
return Promise.reject(error)
}
)2、引入pinia
（1）在store文件夾下創(chuàng)建pinia倉庫，
// 引入 pinia
import { createPinia } from 'pinia'
// 創(chuàng)建大倉庫
const pinia = createPinia()
// 對(duì)外暴露
export default pinia
（2）在main.ts中，引入倉庫并全局使用pinia
// 引入倉庫 import pinia from './store' // 全局使用 pinia app.use(pinia)
3、在api文件夾下，封裝登錄接口，用于統(tǒng)一管理用戶相關(guān)的接口
// 引入封裝好的 request
import request from '@/plugins/request'
// 引入用戶相關(guān)的 ts 類型檢測(cè)
import { loginForm, loginResponseData } from './type'
//用戶相關(guān)接口的請(qǐng)求地址
enum API{
//用戶登錄的請(qǐng)求地址：在接口文檔中，去掉默認(rèn)請(qǐng)求地址baseURL后剩下的部分
LOGIN='/admin/login'
}
//登錄接口
export const reqLogin=(data:loginForm)=>{
request.post<any,loginResponseData>(API.LOGIN,data)
}或者第二種普通封裝方式：
// 封裝登錄相關(guān)接口
import { loginForm } from '@/apis/user/type'
import request from '@/utils/request'
export function useLoginAPI(data: loginForm) {
return request({
url: 'http://monitor-spring.jinxinapp.cn/api/v1/admin/login',
method: 'POST',
data,
})
}4、在store文件夾下創(chuàng)建用戶相關(guān)的小倉庫
// 用戶相關(guān)的小倉庫
import { defineStore } from 'pinia'
//引入登錄接口
import {reqLogin} from '@/api/user/index.ts'
const useUserStore=defineStore('user',{
state:()=>{
return{
token:localStorage.getItem('token'),
}
},
actions:{
//用戶登錄的方法,data是登錄時(shí)傳入的賬號(hào)密碼
async useLogin(data:loginForm){
//登錄請(qǐng)求
const result=awiat reqLogin(data)
if(result.code==200){
this.token=result.data.token
localStorage.getItem('token',result.data.token)
return 'ok'
}else{
return Promise.reject(new Error(result.data.message))
}
}
},
getters:{}
})
export default useUserStore5、在登錄頁面，點(diǎn)擊登錄按鈕調(diào)用tologin方法
const tologin=async ()=>{
try{
//調(diào)用倉庫里的登錄方法，傳入的loginForm里面是賬號(hào)密碼
await useStore.userLogin(loginForm)
$router.push('/home') //登錄成功跳轉(zhuǎn)首頁，
ElNotification({
title: '成功',
message: '登錄成功',
type: 'success',
})
}catch(error){
ElNotification({
message: (error as Error).message,
type: 'error',
})
}
}總結(jié)
到此這篇關(guān)于如何用vue3+Element plus實(shí)現(xiàn)一個(gè)完整登錄功能的文章就介紹到這了,更多相關(guān)vue3+Element plus登錄功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue金額格式化保留兩位小數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)在線預(yù)覽office文件的示例代碼
本文主要介紹了vue實(shí)現(xiàn)在線預(yù)覽office文件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue使用Less與Scss實(shí)現(xiàn)主題切換方法詳細(xì)講解
目前，在眾多的后臺(tái)管理系統(tǒng)中，換膚功能已是一個(gè)很常見的功能。用戶可以根據(jù)自己的喜好，設(shè)置頁面的主題，從而實(shí)現(xiàn)個(gè)性化定制。目前，我所了解到的換膚方式，也是我目前所掌握的兩種換膚方式，想同大家一起分享2023-02-02
這篇文章主要介紹了Vue中key為index和id的區(qū)別詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
使用vue-print-nb打印el-table問題總結(jié)
這篇文章主要介紹了使用vue-print-nb打印el-table問題總結(jié),通過實(shí)例代碼介紹了vue-print-nb 打印功能,本文結(jié)合實(shí)例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue跳轉(zhuǎn)頁面常用的幾種方法匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了vue如何解決代碼需要在dom渲染之后執(zhí)行問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關(guān)于vue中組件傳參的幾種常用方法,Vue組件傳參方也是面試最常考的內(nèi)容,文中通過代碼實(shí)例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
Vue關(guān)于Element UI中的文本域換行問題
這篇文章主要介紹了Vue關(guān)于Element UI中的文本域換行問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03