前端实习D12-CSDN博客

本文链接：https://blog.csdn.net/weixin_73890448/article/details/140627332

axios的使用

vue项目中axios使用(一)：axios基本使用方法及相关配置介绍_vue axios使用-CSDN博客

axios封装

基础地址，超时时间
请求拦截器-统一注入token
响应拦截器-解构数据-处理异常

(src/utils/request.js )

import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
const service = axios.create({
  baseURL: '/api',
  timeout: 10000
})
//请求拦截器
service.interceptors.request.use((config) => {
  //注入token
  if (store.getters.token) {
    //请求头
    config.headers.Authorization = `Bearer ${store.getters.token}`
  }
  return config
}, (error) => {
  return Promise.reject(error)
})
//响应拦截器  解构数据 判断异常
service.interceptors.response.use((response) => {
  //axios默认包裹data
  //解构属性
  const { data, message, success } = response.data
  if (success) {
    return data
  } else {
    Message({ type: 'error', message })
    //终止需要错误对象
    return Promise.reject(new Error(message))
  }
}, (error) => {
  //提示消息 使用element-ui中的提示消息message 导入
  Message({ type: 'error', message: error.message })
  return Promise.reject(error)
})
export default service

补充：关于Message（消息提示）的使用

import { Message } from 'element-ui';

Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数.

Message 也可以接收一个对象为参数。设置type字段可以定义不同的状态，默认为info。此时正文内容以message的值传入。

type:'success'

type: 'warning'

type: 'error'

如果需要可手动关闭的 Message，可以使用showClose字段

Message 拥有可控的duration，设置0为不会被自动关闭，默认为 3000 毫秒。

区分环境变量

将.env.development中的值改为 /api 作为请求工具的基础地址
process.env.VUE_APP_BASE_API 的表示读取该变量，npm run dev时该变量为 /api, npm run build:prod时该变量为 /prod-api 打包在生成的dist目录下打开index.html 右键 live server运行

前后置路由守卫

import router from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'

/**
 *前置守卫
 *
*/

const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  nprogress.start()
  if (store.getters.token) {
    // 存在token
    if (to.path === '/login') {
      // 跳转到主页
      next('/') // 中转到主页
      // next（地址）并没有执行后置守卫
      nprogress.done()
    } else {
       next() // 放行
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') // 中转到登录页
      nprogress.done()
    }
  }
})

/** *
 * 后置守卫
 * **/
router.afterEach(() => {
  nprogress.done()
})

获取用户资料在Vuex中共享

在拓展中查看

设置用户头像和用户名

处理头像为空的场景

当用户没有头像时显示其名字第一个字

 <!-- 显示用户头像和名称 -->
          <img v-if="avatar" :src="avatar" class="user-avatar">
          <span v-else class="username">{{ name?.charAt(0) }}</span>
          <span class="name">{{name}}</span>