登录页
整体认识和路由配置
整体认识
登录页面的主要功能就是表单校验和登录登出业务
- 准备模板
<script setup>
</script>
<template>
<div>
<header class="login-header">
<div class="container m-top-20">
<h1 class="logo">
<RouterLink to="/">小兔鲜</RouterLink>
</h1>
<RouterLink class="entry" to="/">
进入网站首页
<i class="iconfont icon-angle-right"></i>
<i class="iconfont icon-angle-right"></i>
</RouterLink>
</div>
</header>
<section class="login-section">
<div class="wrapper">
<nav>
<a href="javascript:;">账户登录</a>
</nav>
<div class="account-box">
<div class="form">
<el-form label-position="right" label-width="60px"
status-icon>
<el-form-item label="账户">
<el-input/>
</el-form-item>
<el-form-item label="密码">
<el-input/>
</el-form-item>
<el-form-item label-width="22px">
<el-checkbox size="large">
我已同意隐私条款和服务条款
</el-checkbox>
</el-form-item>
<el-button size="large" class="subBtn">点击登录</el-button>
</el-form>
</div>
</div>
</div>
</section>
<footer class="login-footer">
<div class="container">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</footer>
</div>
</template>
<style scoped lang='scss'>
.login-header {
background: #fff;
border-bottom: 1px solid #e4e4e4;
.container {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.logo {
width: 200px;
a {
display: block;
height: 132px;
width: 100%;
text-indent: -9999px;
background: url("@/assets/images/logo.png") no-repeat center 18px / contain;
}
}
.sub {
flex: 1;
font-size: 24px;
font-weight: normal;
margin-bottom: 38px;
margin-left: 20px;
color: #666;
}
.entry {
width: 120px;
margin-bottom: 38px;
font-size: 16px;
i {
font-size: 14px;
color: $xtxColor;
letter-spacing: -5px;
}
}
}
.login-section {
background: url('@/assets/images/login-bg.png') no-repeat center / cover;
height: 488px;
position: relative;
.wrapper {
width: 380px;
background: #fff;
position: absolute;
left: 50%;
top: 54px;
transform: translate3d(100px, 0, 0);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
nav {
font-size: 14px;
height: 55px;
margin-bottom: 20px;
border-bottom: 1px solid #f5f5f5;
display: flex;
padding: 0 40px;
text-align: right;
align-items: center;
a {
flex: 1;
line-height: 1;
display: inline-block;
font-size: 18px;
position: relative;
text-align: center;
}
}
}
}
.login-footer {
padding: 30px 0 50px;
background: #fff;
p {
text-align: center;
color: #999;
padding-top: 20px;
a {
line-height: 1;
padding: 0 10px;
color: #999;
display: inline-block;
~a {
border-left: 1px solid #ccc;
}
}
}
}
.account-box {
.toggle {
padding: 15px 40px;
text-align: right;
a {
color: $xtxColor;
i {
font-size: 14px;
}
}
}
.form {
padding: 0 20px 20px 20px;
&-item {
margin-bottom: 28px;
.input {
position: relative;
height: 36px;
>i {
width: 34px;
height: 34px;
background: #cfcdcd;
color: #fff;
position: absolute;
left: 1px;
top: 1px;
text-align: center;
line-height: 34px;
font-size: 18px;
}
input {
padding-left: 44px;
border: 1px solid #cfcdcd;
height: 36px;
line-height: 36px;
width: 100%;
&.error {
border-color: $priceColor;
}
&.active,
&:focus {
border-color: $xtxColor;
}
}
.code {
position: absolute;
right: 1px;
top: 1px;
text-align: center;
line-height: 34px;
font-size: 14px;
background: #f5f5f5;
color: #666;
width: 90px;
height: 34px;
cursor: pointer;
}
}
>.error {
position: absolute;
font-size: 12px;
line-height: 28px;
color: $priceColor;
i {
font-size: 14px;
margin-right: 2px;
}
}
}
.agree {
a {
color: #069;
}
}
.btn {
display: block;
width: 100%;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
background: $xtxColor;
&.disabled {
background: #cfcdcd;
}
}
}
.action {
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
.url {
a {
color: #999;
margin-left: 10px;
}
}
}
}
.subBtn {
background: $xtxColor;
width: 100%;
color: #fff;
}
</style>
- 配置路由跳转
<li><a href="javascript:;" @click="router.push('/login')">请先登录</a></li>
表单校验功能
为什么需要校验
作用:前端提前校验可以省去一些错误的请求提交
,为后端节省接口压力
表单如何进行校验
ElementPlus表单组件内置了表单校验功能,只需要按照组件要求配置必要参数
即可
思想:当功能很复杂时,通过多个组件各自负责某个小功能,再组合成一个大功能
是组件设计中的常用方法
表单校验步骤
-
按照接口字段
准备表单对象并绑定 -
按照产品要求
准备规则对象并绑定 - 指定表单域的
校验字段名
- 把表单对象进行
双向绑定
用户名:不能为空,字段名为account
密码:不能为空且为6-14个字符,字段名为password
同意协议:必选,字段名为agree
自定义校验规则
ElementPlus表单组件内置了初始的校验配置,应付简单的校验只需要通过配置
即可,如果想要定制一些特殊的校验需求,可以使用自定义校验规则
,格式如下:
{
validator: (rule, val, callback) => {
//自定义校验逻辑
//value: 当前输入的数据
//callback: 校验处理函数 校验通过调用
}
}
校验逻辑:如果勾选了协议框,通过校验,如果没有勾选,不通过校验
整个表单的内容验证
思考:每个表单域都有自己的校验触发事件,如果用户一上来就点击登录怎么办呢?
答:在点击登录时需要对所有需要校验的表单进行统一校验
基础登录业务实现
登录业务流程
基础思想
- 调用登录接口获取用户信息
- 提示用户当前是否成功
- 跳转到首页
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
const doLogin = () => {
const { account, password } = form.value
// 调用实例方法
formRef.value.validate(async (valid) => {
// valid: 所有表单都通过校验 才为true
console.log(valid)
// 以valid做为判断条件 如果通过校验才执行登录逻辑
if (valid) {
// TODO LOGIN
await loginAPI({ account, password })
// 1. 提示用户
ElMessage({ type: 'success', message: '登录成功' })
// 2. 跳转首页
router.replace({ path: '/' })
}
})
}
Pinia管理用户数据
为什么要用Pinia管理数据
由于用户数据的特殊性,在很多组件中都有可能进行共享
,共享的数据使用Pinia管理会更加方便
如何使用Pinia管理数据
遵循理念:和数据相关的所有操作(state+action)都放到Pinia中,组件只负责触发action函数
关键代码总结
Pinia用户数据持久化
持久化用户数据说明
- 用户数据中有一个关键的数据叫做
Token(用来标识当前用户是否登录)
,而Token持续一段时间才会过期
- Pinia的存储是基于内存的,刷新就丢失,为了
保持登录状态
就要做到刷新不丢失,需要配合持久化进行存储
目的:保持token不丢失,保持登录状态
最终效果:操作state时会自动把用户数据在本地的localStorage也存一份,刷新的时候会从localStorage中先取
关键步骤总结和插件运行机制
运行机制:
在设置state的时候会自动把数据同步给localstorage,在获取state数据的时候会优先从localStorage中取
// 管理用户数据相关
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
// 1. 定义管理用户数据的state
const userInfo = ref({})
// 2. 定义获取接口数据的action函数
const getUserInfo = async ({ account, password }) => {
const res = await loginAPI({ account, password })
userInfo.value = res.result
}
// 3. 以对象的格式把state和action return
return {
getUserInfo
}
}, {
persist: true,
})
登录和非登录状态的模板适配
需求理解
多模板适配的通用思路
思路:有几个需要适配的模板就准备几个template片段,通过条件渲染控制显示即可。
请求拦截器携带Token
为什么要在请求拦截器携带Token
Token作为用户标识,在很多个接口中都需要携带Token
才可以正确获取数据,所以需要在接口调用的时候携带Token。另外,为了统一控制
采取请求拦截器携带的方案
如何配置
Axios请求拦截器可以在接口正式发起之前对请求参数做一些事情,通常Token数据会被注入到请求header
中,格式按照后端要求的格式进行拼接处理
。
退出登录功能实现
退出登录业务实现
基础思想:
清除用户信息
跳转到登录页
1- 新增清除用户信息action
// 退出时清除用户信息
const clearUserInfo = () => {
userInfo.value = {}
}
2- 组件中执行业务逻辑
<script setup>
import { useUserStore } from '@/stores/userStore'
import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
const confirm = () => {
console.log('用户要退出登录了')
// 退出登录业务逻辑实现
// 1.清除用户信息 触发action
userStore.clearUserInfo()
// 2.跳转到登录页
router.push('/login')
}
</script>
Token失效401拦截处理
业务背景
Token的有效性可以保持在一定时间,如果用户一段时间不做任何操作
,Token就会失效,使用失效的Token再去请求一些接口,接口就会报401状态码错误
,需要我们做额外处理
两个需要思考的问题:
- 我们能确定用户到底是在访问哪个接口时出现的401错误吗?在什么位置去拦截这个401?
- 检测到401之后又该干什么呢?
解决方案 - 在axios响应拦截器做统一处理
文章来源:https://www.toymoban.com/news/detail-609825.html
失败回调中拦截401 -> 先清除掉过期的用户信息,再跳转到登录页面文章来源地址https://www.toymoban.com/news/detail-609825.html
到了这里,关于登录页的具体实现 (小兔鲜儿)【Vue3】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!