@vueuse/core

js
一般写在：auth.ts

作用：useStorage 是 VueUse 的组合式 API，封装了对 localStorage / sessionStorage 的操作。

const TokenKey = 'Admin-Token';

const tokenStorage = useStorage<null | string>(TokenKey, null);

export const getToken = () => tokenStorage.value;

export const setToken = (access_token: string) => (tokenStorage.value = access_token);

export const removeToken = () => (tokenStorage.value = null);

nprogress

js
一个轻量级的 页面加载进度条插件。

打开网页时，通常在页面顶部会有一条细细的蓝色进度条（类似 YouTube、知乎 的加载条），就是它做的。

它常和 路由切换、异步请求 结合使用，给用户一个“正在加载”的反馈。
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


NProgress.configure({
  minimum: 0.1,       // 最小百分比
  easing: 'ease',     // 动画曲线
  speed: 500,         // 增长速度
  showSpinner: false, // 是否显示右侧小圈圈
  trickleSpeed: 200,  // 自动递增的间隔
})

configure 用来设置全局配置，showSpinner: false 表示 隐藏右上角的小转圈（默认是有的）。



NProgress.start()   // 开始进度条
NProgress.done()    // 结束进度条
NProgress.set(0.4)  // 设置进度到 40%
NProgress.inc()     // 自动前进一点

1.当页面路由发生切换时，显示进度条：

// main.js 或 router.js
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置
NProgress.configure({ showSpinner: false }) // 关闭右侧小圈圈

// 路由开始切换时
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

// 路由切换结束时
router.afterEach(() => {
  NProgress.done()
})


当发起网络请求时显示进度条：

import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 请求拦截器
axios.interceptors.request.use(config => {
  NProgress.start()
  return config
})

// 响应拦截器
axios.interceptors.response.use(
  response => {
    NProgress.done()
    return response
  },
  error => {
    NProgress.done()
    return Promise.reject(error)
  }
)