在vue项目中使用进度条的实现

Posted 2022-12-15 Lumbago～

下载

npm install nprogress --save

 

基本用法

Nprogress.start()

Nprogress.start().done()

 

（我在拦截器直接引入）

import axios from 'axios'
import store from "../store/index"

//引入nprogress

import Nprogress from "nprogress"
import 'nprogress/nprogress.css'

const Server = axios.create(
    baseURL: 'https://www.liulongbin.top:8888/api/private/v1/',
    timeout: 5000,
);
Server.interceptors.request.use(function (config) 
    //开始
    Nprogress.start()
    if (store.state.token.length > 0) 
        config.headers['Authorization'] = store.state.token;
    
    return config
, function (error) 
    return Promise.reject(error);
)
Server.interceptors.response.use(function (response) 
     //结束
    Nprogress.start().done()
    return response.data
, function (error) 
    return Promise.reject(error);
)

export default Server

 

实现

router.beforeEach((to, from, next) => 
if (to.path == '/login') 
    sessionStorage.removeItem('username');
  
let user = sessionStorage.getItem('username');
if (!user && to.path != '/login') 
    next(path: '/login')
   else 
    NProgress.start();
    next()
  
);