Vue--第十天

终极实战----大事件项目

1.简介：

2.创建项目：

1.创建（159-163）：

还是对着视频操作吧

2.路由：

3.element Plus:

导入element Plus 后不需要再导入插件配置，就连组件导入也不用

4.pinia构建用户仓库和持久化：

持久化：

单独管理和导出：

5.数据交互-请求工具设计：

配置：

import axios from 'axios'

import {ElMessage} from 'element-plus'

import router from '@/router'

import { useUserStore } from '@/store'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({

  baseURL,

  timeout: 5000,

  headers: { 'X-Custom-Header': 'foobar' }

})

// 请求拦截器

instance.interceptors.request.use(

  (config) => {

    // TODO 2. 携带token

    const userStore = useUserStore()

    if (userStore.token) {

      config.headers.Authorization = userStore.token

    }

    return config

  },

  (err) => Promise.reject(err)

)

// 响应拦截器

instance.interceptors.response.use(

  (res) => {

    // TODO 3. 处理业务失败

    // TODO 4. 摘取核心响应数据

    if (res.data.code === 0) {

      return res

    }

    ElMessage.error(res.data.message || '服务异常')

    // 处理业务失败，给错误提示，异常抛出

    return Promise.reject(res.data)

  },

  (err) => {

    // TODO 5. 处理401错误

    // 错误的特殊情况 => 401 权限不足 或 token 过期  => 拦截到登录

    if (err.message?.status === 401) {

      router.push('/login')

    }

    // 错误的默认情况 => 只要给提示

    ElMessage.error(err.response.data.message || '服务异常')

    return Promise.reject(err)

  }

)

export default instance

// 其实这里导出基础路由我不是很理解

export { baseURL }

6.整体路由设计：

7.登录页加载：

8.校验：

9.预校验：

注意：在我们开始导入组建的时候，我们是按需导入的，所以我们不用在第二次在页面中导入。像这种做法就是错的。

我们可以这么做：再eslintrc中声明全局变量，解决ElMesage报错问题