vue3项目（七）----Login

1.登录-整体认识和路由配置

 2.登录-表单校验实现

ElementPlus表单组件内置了表单校验功能，只需要按照组件要求配置必要参数即可.。 

思想：当功能很复杂时，通过多个组件各自负责某个小功能，再组合成一个大功能是组件设计中的常用方法。

表单校验步骤：

1. 按照接口字段准备表单对象并绑定

2. 按照产品要求准备规则对象并绑定

3. 指定表单域的校验字段名

4. 把表单对象进行双向绑定

 

 自定义校验规则：

ElementPlus表单组件内置了初始的校验配置，应付简单的校验只需要 通过配置 即可，如果想要定制一些 特殊的校验需 求，可以使用自定义校验规则 。

这里给是否同意协议绑定自定义校验。

 整个表单的内容验证：

思考：每个表单域都有自己的校验触发事件，如果用户一上来就点击登录怎么办呢？

答：在点击登录时需要对所有需要校验的表单进行统一校验。

步骤：

1. 获取form组件实例（通过ref获取）

2. 调用实例方法

 3.登录-基础登录业务实现

登录业务流程

 1）封装接口

在src下创建user.js文件，用于封装所有用户的接口函数

// 封装所有和用户相关的接口函数
import request from '@/utils/http'

export const loginAPI=({account,password})=>{
    return request({
        url:'/login',
        method:'POST',
        data:{
            account,
            password
        }
    })
}

2）调用接口

3）登录成功后提示用户并跳转首页

使用Element组件的ElMessage来提示用户，但是在使用时，样式需要单独导入。

跳转首页：使用useRouter跳转。

import { loginAPI } from "@/apis/user";
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import { useRouter } from "vue-router";
// 3. 获取form实例做统一校验
const formRef = ref(null);
const router = useRouter();
const doLogin = () => {
  const { account, password } = form.value;
  // 调用实例方法
  formRef.value.validate(async (valid) => {
    // valid:所有表单都通过校验  才为true
    console.log(valid);
    // 以valid作为判断条件，如果通过校验才执行登录
    if (valid) {
      const res = await loginAPI({ account, password });
      console.log(res);
      //  1.提示用户
      ElMessage({ type: "success", message: "登陆成功" });
      // 2.跳转首页
      router.replace({ path: "/" });
    }
  });
};

4）如果登录失败，需要提示错误信息

这里统一错误提示，方便后面其他接口使用。

这里就使用了响应式拦截器。

//src/utils/http.js
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
  // 统一错误提示
ElMessage({
  type:'warning',
  message:e.response.data.message
})
  return Promise.reject(e)
})

4.登录-Pinia管理用户数据

由于用户数据的特殊性，在 很多组件中都有可能进行共享 ，共享的数据使用Pinia管理会更加方便。

遵循理念：和数据相关的所有操作（state + action）都放到Pinia中，组件只负责触发action函数。

步骤：

1）在stores下创建user.js，用于管理用户数据

// 管理用户数据
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 {
        userInfo,
        getUserInfo
    }
})

2)在组件中使用

原先需要引入loginAPI来实现，现在直接使用user.js里的useUserStore方法实现。

//src/views/Login/index.vue
import {useUserStore} from '@/stores/user'
const userStore=useUserStore()
// 3. 获取form实例做统一校验
const formRef = ref(null);
const router = useRouter();
const doLogin = () => {
  const { account, password } = form.value;
  // 调用实例方法
  formRef.value.validate(async (valid) => {
    // valid:所有表单都通过校验  才为true
    console.log(valid);
    // 以valid作为判断条件，如果通过校验才执行登录
    if (valid) {
      await userStore.getUserInfo({account, password})
      //  1.提示用户
      ElMessage({ type: "success", message: "登陆成功" });
      // 2.跳转首页
      router.replace({ path: "/" });
    }
  });
};

5.登录-Pinia用户数据持久化

1. 用户数据中有一个关键的数据叫做 Token （用来标识当前用户是否登录） ，而Token 持续一段时间才会过期

2. Pinia的存储是基于内存的，刷新就丢失，为了 保持登录状态 就要做到刷新不丢失，需要配合持久化进行存储

目的：保持token不丢失，保持登录状态

最终效果：操作state时会自动把用户数据在本地的localStorage也存一份，刷新的时候会从localStorage中先取

这里我们使用pinia持久化插件：piniaPluginPersistedstate

步骤：

1）安装插件包

npm i pinia-plugin-persistedstate

2）pinia注册插件

//main.js
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia=createPinia()
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

3）进行持久化的配置

当前是用户需要，所以在user.js中配置

添加  persist : true

 6.登录-登录和非登录状态的模版适配

需求：当登录时，显示登录的模块；未登录时，显示未登录的模块。

通过两个template片段，来进行条件渲染。

多模版适配的通用思路

思路：有几个需要适配的模版就准备几个template片段，通过条件渲染控制显示即可

7.登录-请求拦截器携带Token 

Token作为用户标识，在很 多个接口中都需要携带Token 才可以正确获取数据，所以需要在接口调用时携带Token。另外，为了 统一控制 采取请求拦截器携带的方案。

如何配置：

Axios请求拦截器可以在接口正式发起之前对请求参数做一些事情，通常Token数据会被注入到 请求header 中，格式按照 后端要求的格式进行拼接处理。

//src/utils/http.js
import { useUserStore } from '@/stores/user'
// axios请求拦截器
httpInstance.interceptors.request.use(config => {
  // 1. 从pinia获取token数据
  const userStore = useUserStore()
  // 2. 按照后端的要求拼接token数据
  const token = userStore.userInfo.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, e => Promise.reject(e))

8.登录-退出登录功能实现

 步骤：

1）给退出登录按钮绑定一个confirm事件,点击确认按钮时触发。

2）点击事件的实现

因为当前的用户信息存储在userStore中。

所以退出时清除用户信息通过派发action来实现。

 9.Token失效401拦截处理

背景：Token的有效性可以保持一定的时间，如果用户一段时间不做任何操作，Token会失效。

使用失效的Token再去请求一些接口，就会报401状态码的错误，所以我们需要预处理一下。

解决方案：

在axios响应拦截器中做统一处理。

步骤：

1）失败回调中拦截401

2）清除过期的用户信息，并跳转到登录页。

 总结：

1.表单校验主要是使用ElementPlus组件来完成。
其中：
1）用户名和密码：只需要通过简单的配置（看文档的方式，复杂的功能通过多个不同的组件来拆解）
2）同意协议：自定义规则，validator:(rule,value,callback)=>{}
3）统一校验：通过调用form实例的方法 validate->true
2.登录的业务流程。
使用Elmessage来提示用户是否跳转成功。
使用useRouter进行路由跳转。
3.统一错误提示。
使用响应式拦截器。
4.使用pinia管理用户数据。
5.pinia用户数据持久化
使用pinia持久化插件来完成。
6.多模板适配思路：有几个需要适配的模版就准备几个template片段，通过条件渲染控制显示。
7.请求拦截器携带token，把token注入请求header中。
8.退出登录：用户信息存储在userStore中，所以通过派发action来实现。
9.token失效处理：在响应拦截器中统一处理。