项目文件基本配置(utils)--自行建立

一、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()
})