?登錄業(yè)務實現(xiàn)：

登錄成功/失敗實現(xiàn)? ->? pinia管理用戶數據及數據持久化? ->? 不同登錄狀態(tài)的模板適配?? ->? 請求攔截器攜帶token（登錄鑒權）? ->? 退出登錄實現(xiàn)? ->? token失效（401響應攔截）

---

?

1. 登錄成功/失敗實現(xiàn)

當表單校驗通過時，封裝登錄接口，調用登錄接口，分別處理 登錄成功和登陸失敗的情況。

登錄成功，則提示用戶，并跳轉首頁；

登錄失敗，報錯。-> 攔截器統(tǒng)一報錯（配置一次 多接口生效）

2. pinia管理用戶數據及數據持久化

因為用戶數據可能在多組件中進行共享，使用 pinia對用戶數據進行管理。與數據有關的操作置于pinia中，組件只負責觸發(fā)action函數

（1） pinia管理數據?

// 定義store
export const useUserStore = defineStore('模塊名', ()=>{// 1. 定義stateconst userInfo = ref({})// 2. 定義actionconst getUserInfo = () => {...}// 3. 以對象的形式return state/actionreturn {...}
})

// 使用store
import { useXXXStore } from '@/stores/XXXStore'const xxXStore = useXXXStore()
xxXStore.getXX()

?（2）持久化用戶數據

token：用戶數據中 用于標識當前用戶是否登錄，持續(xù)一段時間會過期。

由于pinia是基于內存的，刷新會丟失，為保持登陸狀態(tài)（刷新不丟失），要配合持久化進行存儲

-> 操作state時，自動把用戶數據在本地的localStore中也存一份，（刷新時 從localStore中先取）

操作步驟：

1）安裝插件包： npm i pinia-plugin-persistedstate

2）注冊插件：

// main.js 入口文件中
const pinia = createPinia()
pinia.use(piniaPluginPersistedState)

3）持久化配置 存入localStore：

// 定義store中，添加配置項（第三個參數），用于持久化配置
defineStore('',()=>{...
},{// 持久化配置，存入lspersist:{enabled: true}
})

3. 不同登錄狀態(tài)的模板適配（多模板適配）

多模板適配 思路：登錄時顯示第一塊，非登錄時顯示第二塊

判斷條件：是否有token

<template v-if="userStore.userInfo.token">...
</template>
<template v-else>...          
</template>

4. 請求攔截器攜帶token

token作為用戶標識，多個接口要正確攜帶token才能正確顯示數據 -> 在接口調用時攜帶token -> 采用攔截器攜帶（便于 統(tǒng)一控制）

解決： 請求攔截器可以在接口發(fā)起前 對請求參數進行操作。通常token被注入到請求header中，格式按照后端要求的格式進行拼接

// utils/http.js中// axios請求攔截器
httpInstance.interceptors.request.use(config => {// 請求攔截器攜帶token（->按后端要求拼接token數據），使得多個接口攜帶tokenconst userStore = useUserStore()const token = userStore.userInfo.tokenif(token){config.headers.Authorization = `Bearer ${token}`    //按后端的要求拼接}return config
},e => Promise.reject(e))

5. 退出登錄實現(xiàn)

點擊退出登錄時，防止誤觸，彈出一個氣泡確認框（el-popconfirm）進行二次確認。

退出登錄業(yè)務邏輯： 清除用戶數據；跳轉到登錄頁

// 組件中，views/XXX.vue
<el-popconfirm @confirm="confirm" title="確認退出嗎?" confirm-button-text="確認" cancel-button-text="取消"><template #reference><a href="javascript:;">退出登錄</a></template>
</el-popconfirm>

// store中(stores/XXX.js)，定義清除用戶信息的action
const clearUserInfo = ()=>{userInfo.value = {}
}
return {clearUserInfo
}...// 組件中(views/XXX.vue)，實現(xiàn)退出登錄業(yè)務的邏輯
import { useRouter } from 'vue-router'
const router = useRouter()
const confirm = ()=>{userStore.clearUserInfo()    // 1. 清除用戶數據（  -> 調用action進行操作）    router.push('/login')        // 2. 轉到登錄頁
}    

6. token失效（401攔截）

token有效性保持一段時間，如果用戶不做任何操作，token會失效，使用失效的token去請求一些接口，接口就會報401狀態(tài)碼錯誤。

?解決：在axios響應攔截器做統(tǒng)一處理

// 401攔截
import router from '@/router'    //js中的路由對象！！// axios響應式攔截器中
httpInstance.interceptors.response.use(res => res.data, e => {const userStore = useUserStore()...// 401失效處理： 1.清除用戶數據 2. 跳轉if(e.response.status === 401){userStore.clearUserInfo()router.push('/login')}return Promise.reject(e)
})export default httpInstance

參考：Popconfirm 氣泡確認框 | Element Plus

ElementUI 教程 - Popconfirm 氣泡確認框

一文教你搞定所有前端鑒權與后端鑒權方案，讓你不再迷惘 - 掘金 (juejin.cn)