一、utils文件夾

1.auth.js

import Cookies from 'js-cookie';

const loginStatus = 'loginStatus';

export function getLoginStatus () {
  return Cookies.get(loginStatus);
}

export function setLoginStatus (status) {
  return Cookies.set(loginStatus, status, { expires: 7 });// 默認7天
}

export function removeLoginStatus () {
  return Cookies.remove(loginStatus);
}

auth文件主要依賴js-cook模塊，獲取登錄狀態。

2.request.js

該文件主要是創建一個axios實例，并配置請求攔截器與響應攔截器。

請求攔截器：前端的請求，最終還是離不開ajax，像vue-resource、axios等，都只是對ajax進行了統一的封裝，最終暴露出來的攔截器，其實就是寫了一個方法，把ajax寫在這個方法里面。在執行這個方法的時候，先將請求時要添加給請求頭的那些數據（比如token等）先執行一遍，然后再統一傳給ajax。所謂的請求攔截，其實就是先執行一下要添加的數據，然后再執行ajax。請求攔截就是把添加數據的這個過程抽離出來了。

響應攔截器：作用是在接收到響應后進行一些操作，例如在服務器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁。這個就是在請求結果返回后，先不直接導出，而是先對響應碼進行初步處理，處理好再導出給頁面，這個對響應碼的處理的過程就是響應攔截。

import axios from 'axios';
import { getLoginStatus } from '@/utils/auth';

// 創建一個axios實例
const service = axios.create({
  timeout: 10 * 60 * 1000, // request timeout
});

const tokenHeader = 'token'; // token自定義頭部名稱

// 添加請求攔截器
service.interceptors.request.use(config => {
  // 在發送請求之前做某事，比如說 設置token
  const token = getLoginStatus() || '123';
  // config.headers['token'] = 'token';
  if (token) {
    config.headers[tokenHeader] = getLoginStatus();
  }
  return config;
}, error => {
  // 請求錯誤時做些事
  return Promise.reject(error);
});

// 添加響應攔截器
service.interceptors.response.use(response => {
  const res = response.data;
  // 如果返回的狀態不是200 就主動報錯
  if(res.state != 200){
    return Promise.reject(res.message || 'error')
  }
  return response;
}, error => {
  return Promise.reject(error.response.data); // 返回接口返回的錯誤信息
})

export default service

定義了request.js文件，所以，在接口定義文件api/user.js中，寫法通常是：

import service from '@/utils/request';

export function userLoginApi (data) {
  return service({
    url: '/sys/login',
    method: 'POST',
    data,
  });
}

在.vue文件中調用接口，通常是：

import {  userLoginApi } from '@/api/user';

 userLoginApi(params).then(res => {
    // 成功后怎么樣
    }, (err) => {
     // 失敗后怎么樣
     });

3.permission.js

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' 
import 'nprogress/nprogress.css' 
//auth文件主要依賴js-cookie模塊，把getToken，setToken，removeToken設置在這里
import { getToken } from '@/utils/auth' 
//get-page-title文件主要是網站的標題，get-page-title通過依賴setting.js里的title變量修改網站標題
//如果需要更改網站的標題，可以直接到setting.js修改title屬性
import getPageTitle from '@/utils/get-page-title'

//NProgress是封裝的進度條，基本不用動
NProgress.configure({ showSpinner: false }) 

//路由白名單列表，把路由添加到這個數組，不用登陸也可以訪問
const whiteList = ['/login'] 


router.beforeEach(async(to, from, next) => { 
  // 請求路由時進度條開始
  NProgress.start()

  // 設置標題
  document.title = getPageTitle(to.meta.title)

  // 這里的getToken()就是在上面導入的auth.js里的getToken()方法
  const hasToken = getToken()

//如果存在token，即存在已登陸的令牌
  if (hasToken) {
  //如果用戶存在令牌的情況請求登錄頁面，就讓用戶直接跳轉到首頁，避免存在重復登錄的情況
    if (to.path === '/login') {
      // 直接跳轉到首頁，當然取決于你的路由重定向到哪里
      next({ path: '/' })
      //一定要關閉進度條
      NProgress.done()
    } else {
      //如果已經有令牌的用戶請求的不是登錄頁，是其他頁面
      //就從Vuex里拿到用戶的信息，這里也證明用戶不是第一次登錄了
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
      //信息拿到后，用戶請求哪就跳轉哪
        next()
      } else {
        try {
          // 如果有令牌，但是沒有用戶信息，證明用戶是第一次登錄，通過Vuex設置用戶信息
          await store.dispatch('user/getInfo')
        //設置好了之后，依然可以請求哪就跳轉哪
          next()
        } catch (error) {
          // 如果出錯了，把令牌去掉，并讓用戶重新去到登錄頁面
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          //關閉進度條
          NProgress.done()
        }
      }
    }
  } else {
    //這里是沒有令牌的情況
    //還記得上面的白名單嗎，現在起作用了
    //whiteList.indexOf(to.path) !== -1)判斷用戶請求的路由是否在白名單里
    if (whiteList.indexOf(to.path) !== -1) {
      // 不是-1就證明存在白名單里，不管你有沒有令牌，都直接去到白名單路由對應的頁面
      next()
    } else {
      // 如果這個頁面不在白名單里，直接跳轉到登錄頁面
      next(`/login?redirect=${to.path}`)
      //關閉進度條
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  //每次請求結束后都需要關閉進度條
  NProgress.done()
})

總結

以上是生活随笔為你收集整理的项目文件基本配置(utils)--自行建立的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。