小兔鲜电商项目（四）---登录页
·
目录
路由配置
在 src \views\Login\index.vue 中添加登录页代码：
<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>
在src/views/Layout/components/LayoutNav.vue中，修改请先登录的a标签，实现跳转
<li><a href="javascript:;" @click="$router.push('/login')">请先登录</a></li>表单校验实现
原因：可以省区一些错误的请求提交，为后端节省接口压力
ElementPlus 表单组件内置了表单校验功能，只需要按照组件要求配置必要参数即可（直接看文档)。
el-from：绑定表单对象和规则
el-form-item：绑定使用的规则字段
el-input：双向绑定表单数据
校验步骤：按照接口字段转杯表单对象并绑定；按照产品要求准备规则对象并绑定；指定表单域的校验字段名；把表单对象进行双向绑定
在src/views/Layout/components/LayoutNav.vue中实现表单校验
import {ref} from 'vue'
// 表单校验（用户名+密码）
const form=ref({
account:'',
password:''
})
const rules={
account:[
{required:true,message:'用户名不能为空',trigger:'blur'}
],
password:[
{required:true,message:'密码不能为空',trigger:'blur'},
{min:6,max:14,message:'密码长度为6-14个字符',trigger:'blur'}
]
}表单对象，规则对象绑定，并把表单对象进行双向绑定
<el-form :model="form" :rules="rules" label-position="right" label-width="60px" status-icon>
<el-form-item prop="account" label="账户">
<el-input v-model="form.account"/>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model="form.password"/>
</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>自定义校验规则
ElementPlus表单组件内置了初始的校验配置，应付简单的校验只需要通过配置即可，如果想要定制一些特殊的校验需求，可以使用自定义校验规则。
// 表单校验
const form=ref({
account:'',
password:'',
agree:''
})
const rules={
agree: [
{
// value:当前输入的数据 callback：校验处理函数，校验通过调用
validator: (rule, value, callBack) => {
// console.log(value)
//自定义校验逻辑
// 勾选协议通过，不勾选不通过
if (value) {
callBack()
} else {
callBack(new Error('请勾选协议'))
}
}
}
]
}<el-form-item prop="agree" label-width="22px">
<el-checkbox size="large" v-model="form.agree">
我已同意隐私条款和服务条款
</el-checkbox>
</el-form-item>统一校验
为了防止用户一上来就点击登录，在点击登录时需要对所有需要校验的表达那进行统一校验
// 获取form实例做统一校验
const formRef=ref(null)
const doLogin=()=>{
formRef.value.validate((valid)=>{
// console.log(valid)
if(valid){
//to doLogin
}
})
}<el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>基础功能实现
在apis下创建user.js用来封装所有和用户相关的接口函数
import http from '@/utils/http'
export const loginAPI= ({ account, password }) => {
return http({
url: '/login',
method: 'POST',
data: {
account, password
}
})
}在登录index.vue中导入api
import { loginAPI } from '@/apis/user'
import 'element-plus/theme-chalk/el-message.css'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router=useRouter()
const doLogin=()=>{
const {account,password}=form.value
formRef.value.validate(async (valid)=>{
// console.log(valid)
if(valid){
//to doLogin
const res=await loginAPI({account,password})
console.log(res)
// 提示用户
ElMessage({type:'success',message:'登录成功'})
// 跳转首页
router.replace({path:'/'})
}
})
}在src/utils/http.js的axios响应式拦截器中进行统一错误提示
// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {
// 统一错误提示
ElMessage({
type: 'warning',
message: e.response.data.message
})
return Promise.reject(e)
})Pinia管理用户数据
使用pinia管理数据原因：由于用户数据的特殊性，在很多组件中都有可能进行共享，共享的数据使用Pinia管理会更加方便
遵循理念：和数据相关的所有操作（state+action）都放到Pinia中，组件只负责触发action函数
在src/stores/user.js中
// 管理用户相关数据
import { defineStore } from "pinia"
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
// 定义管理用户数据的state
const userInfo = ref({})
//定义获取接口数据的action函数
const getUserInfo = async ({ account, password }) => {
const res = await loginAPI({ account, password })
userInfo.value = res.result
}
//以对象的格式把state和action return
return {
userInfo,
getUserInfo
}
})在src/views/Login/index.vue中修改代码
import { useRouter } from 'vue-router'
import {useUserStore} from '@/stores/user'
const userStore=useUserStore()
// 获取form实例做统一校验
const formRef=ref(null)
const router=useRouter()
const doLogin=()=>{
const {account,password}=form.value
formRef.value.validate(async (valid)=>{
// console.log(valid)
if(valid){
//to doLogin
await userStore.getUserInfo({account,password})
// 提示用户
ElMessage({type:'success',message:'登录成功'})
// 跳转首页
router.replace({path:'/'})
}
})
}Pinia用户数据持久化
用户数据中有一个关键的数据叫做 Token（用来标识当前用户是否登录)，而 Token 持续一段时间才会过期；Pinia 的存储是基于内存的，刷新就丢失，为了保持登录状态就要做到刷新不丢失，需要配合持久化进行存储。
最终效果：操作 state 时会自动把用户数据在本地的 localStorage 也存一份，刷新的时候会从 localStorage 中先取。
安装 pinia 持久化插件 persistedstate：
npm i pinia-plugin-persistedstate
在 main.js 中注册 pinia 持久化插件：
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)在stores/use.js中修改代码
// 管理用户相关数据
import { defineStore } from "pinia"
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
// 定义管理用户数据的state
const userInfo = ref({})
//定义获取接口数据的action函数
const getUserInfo = async ({ account, password }) => {
const res = await loginAPI({ account, password })
userInfo.value = res.result
}
//以对象的格式把state和action return
return {
userInfo,
getUserInfo
}
}, {
persist: true,
})此时，当用户登录时，LocalStorage中会存储用户信息
登录和非登录状态下的模板适配
在LayoutNav.vue中修改代码
import { useUserStore } from '@/stores/user'
const userStore=useUserStore()<ul>
<!-- 多模板渲染 -->
<template v-if="userStore.userInfo.token">
<li><a href="javascript:;"><i class="iconfont icon-user"></i>{{ userStore.userInfo.account }}</a></li>
<li>
<el-popconfirm title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
<template #reference>
<a href="javascript:;">退出登录</a>
</template>
</el-popconfirm>
</li>
<li><a href="javascript:;">我的订单</a></li>
<li><a href="javascript:;">会员中心</a></li>
</template>
<template v-else>
<li><a href="javascript:;" @click="$router.push('/login')">请先登录</a></li>
<li><a href="javascript:;">帮助中心</a></li>
<li><a href="javascript:;">关于我们</a></li>
</template>
</ul>请求拦截器携带Token
Token作为用户标识，在很多个接口中都需要携带Token才可以正确获取数据，所以需要在接口调用时携带Token。另外，为了统一控制采取请求拦截器携带的方案。
Axiosi请求拦截器可以在接口正式发起之前对请求参数做一些事情，通常Token数据会被注入到请求header 中，格式按照后端要求的格式进行拼接处理。
在http.js中文件中的请求拦截器，从 pinia 获取token数据，将 token 存储到请求的请求头中：
import { useUserStore } from '@/stores/user'
// axios请求拦截器
http.interceptors.request.use(config => {
// 从pinia获取token数据
const userStore = useUserStore()
// 按照后端要求拼接token数据
const token = userStore.userInfo.token
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, e => Promise.reject(e))
退出登录功能实现
首先清除用户信息，然后跳转到登录页面
在stores/use.js中
// 管理用户相关数据
import { defineStore } from "pinia"
import { ref } from 'vue'
import { loginAPI } from '@/apis/user'
export const useUserStore = defineStore('user', () => {
// 定义管理用户数据的state
const userInfo = ref({})
//定义获取接口数据的action函数
const getUserInfo = async ({ account, password }) => {
const res = await loginAPI({ account, password })
userInfo.value = res.result
}
// 退出时清除用户信息
const clearUserInfo = () => {
userInfo.value = {}
}
//以对象的格式把state和action return
return {
userInfo,
getUserInfo,
clearUserInfo
}
}, {
persist: true,
})在LayoutNav.vue中
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
const userStore=useUserStore()
const router=useRouter()
const confirm=()=>{
// 清除用户信息
userStore.clearUserInfo()
router.push('/login')
}Token失效401拦截处理
Token的有效性可以保持一定时间，如果用户一段时间不做任何操作，Token.就会失效，使用失效的Token再去请求一些接口，接口就会报401状态码错误，需要我们做额外处理。
解决方案：在axios响应拦截器做统一处理
// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {
const userStore = useUserStore()
// 统一错误提示
ElMessage({
type: 'warning',
message: e.response.data.message
})
// 401 token失效处理
if (e.response.status === 401) {
userStore.clearUserInfo()
router.push('/login')
}
return Promise.reject(e)
})
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
更多推荐
23
0- 0
已为社区贡献6条内容
所有评论(0)