做网站对商家的好处,列举免费域名注册的网站,工作态度和责任心句子,信誉好的宜昌网站建设登录业务实现#xff1a;
登录成功/失败实现 - pinia管理用户数据及数据持久化 - 不同登录状态的模板适配 - 请求拦截器携带token#xff08;登录鉴权#xff09; - 退出登录实现 - token失效#xff08;401响应拦截#xff09; 1. 登录成… 登录业务实现
登录成功/失败实现 - pinia管理用户数据及数据持久化 - 不同登录状态的模板适配 - 请求拦截器携带token登录鉴权 - 退出登录实现 - token失效401响应拦截 1. 登录成功/失败实现
当表单校验通过时封装登录接口调用登录接口分别处理 登录成功和登陆失败的情况。
登录成功则提示用户并跳转首页
登录失败报错。- 拦截器统一报错配置一次 多接口生效 2. pinia管理用户数据及数据持久化
因为用户数据可能在多组件中进行共享使用 pinia对用户数据进行管理。与数据有关的操作置于pinia中组件只负责触发action函数
1 pinia管理数据
// 定义store
export const useUserStore defineStore(模块名, (){// 1. 定义stateconst userInfo ref({})// 2. 定义actionconst getUserInfo () {...}// 3. 以对象的形式return state/actionreturn {...}
})
// 使用store
import { useXXXStore } from /stores/XXXStoreconst xxXStore useXXXStore()
xxXStore.getXX() 2持久化用户数据
token用户数据中 用于标识当前用户是否登录持续一段时间会过期。
由于pinia是基于内存的刷新会丢失为保持登陆状态刷新不丢失要配合持久化进行存储
- 操作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. 不同登录状态的模板适配多模板适配
多模板适配 思路登录时显示第一块非登录时显示第二块
判断条件是否有token
template v-ifuserStore.userInfo.token...
/template
template v-else...
/template 4. 请求拦截器携带token
token作为用户标识多个接口要正确携带token才能正确显示数据 - 在接口调用时携带token - 采用拦截器携带便于 统一控制
解决 请求拦截器可以在接口发起前 对请求参数进行操作。通常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. 退出登录实现
点击退出登录时防止误触弹出一个气泡确认框el-popconfirm进行二次确认。
退出登录业务逻辑 清除用户数据跳转到登录页
// 组件中views/XXX.vue
el-popconfirm confirmconfirm title确认退出吗? confirm-button-text确认 cancel-button-text取消template #referencea hrefjavascript:;退出登录/a/template
/el-popconfirm
// store中(stores/XXX.js)定义清除用户信息的action
const clearUserInfo (){userInfo.value {}
}
return {clearUserInfo
}...// 组件中(views/XXX.vue)实现退出登录业务的逻辑
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状态码错误。 解决在axios响应拦截器做统一处理
// 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)
