标签：01 const 鲜儿 router token axios pinia vue3 import

1.pinia基础

store/modules/user.ts

import { defineStore } from 'pinia'
// 用户模块
const useUserStore = defineStore('user', {
  state: () => {
    return {
      // 用户信息
      profile: {} as UserProfile
    }
  },
  actions: {
    // 修改用户信息
    setUser (payload: UserProfile) {
      this.profile = payload
    }
  }
})

export default useUserStore

2.pinia本地持久化

1. npm install pinia-persistedstate

2. 在pinia中使用pinia-persistedstate

main.ts

import router from './router'
import { createPinia } from 'pinia'
import persistedState from 'pinia-persistedstate'
import { createApp } from 'vue'
import App from './App.vue'

// pinia本地持久化，将user模块和cart模块的数据存储到localStorage
const store = createPinia()
store.use(
  persistedState({
    key: 'erabbit-shop',
    paths: ['user', 'cart']
  })
)
createApp(App).use(router).use(store).mount('#app')

3.请求工具

1. npm install axios

2. 封装一个请求工具函数，供调用时使用

utils/request.ts

import axios, { AxiosRequestHeaders } from 'axios'
import useStore from '@/store'
import router from '@/router'

const { useUserStore } = useStore()
const userStore = useUserStore()

// 1.创建一个新的axios实例
export const baseURL = 'https://apipc-xiaotuxian-front.itheima.net'
const instance = axios.create({
  baseURL,
  timeout: 5000
})

// 2.请求拦截器，如果有token就进行头部携带
instance.interceptors.request.use(
  (config) => {
    // 判断token
    const { token } = userStore.profile
    console.log(token)
    if (token) {
      (config.headers as AxiosRequestHeaders).Authorization = `Bearer ${token}`
    }
    return config
  },
  (err) => {
    return Promise.reject(err)
  }
)

// 3.响应拦截器，1.剥离无效数据 2.处理token失效
instance.interceptors.response.use(
  (res) => res.data,
  (err) => {
    // 如果是401状态码
    if (err.response && err.response.status === 401) {
      // 1.清空无效用户信息
      userStore.setUser({} as UserProfile)
      // 2.跳转到登录页，且跳转需传参(当前路由地址)，方便登录后跳回当前页面
      // 当前路由地址怎么获取？
      // 组件里面：`/user?a=10` $route.path === /user $route.fullPath === /user?a=10
      // ts模块中：router.currentRoute.value.fullPath，router.currentRoute是ref响应式对象
      // 同时要处理?后面的参数，因为前面已经带有=了，不能有多个=
      // encodeURICompoennt：转换URI编码，防止解析地址出问题
      const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)
      router.push(`/login?redirectUrl=${fullPath}`)
    }
    return Promise.reject(err)
  }
)

// 4.导出一个函数，函数内部使用当前的axios实例发送请求，返回promise
const request = (url: string, method: string, submitData: any) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  // axios实例返回的就是promise
  return instance({
    url,
    method,
    // 1.如果是get请求，就通过params传递submitData
    // 2.如果是post请求，就通过data传递submitData
    // const a = {name: 'jzh'}, a[10>9 ? 'name':'age] 动态的key
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

export default request

4.路由设计

标签：01,const,鲜儿,router,token,axios,pinia,vue3,import
来源： https://www.cnblogs.com/jzhFlash/p/16609144.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。