人资项目day02----解决开发环境的跨域问题-CFANZ编程社区

开发环境的跨域：就是在vue-cli脚手架环境下开发启动服务时，我们访问接口所遇到的跨域问题，vue-cli为我们在本地开启了一个服务,可以通过这个服务帮我们代理请求,解决跨域问题这就是vue-cli配置webpack的反向代理。


//  在 vue.config.js 中配置
 
module.exports = {
  devServer: {
    // 代理配置
    proxy: {
      // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
      '/api': {
         target: '跨域请求的地址', 
         changeOrigin: true  // 只有这个值为true的情况下 才表示开启跨域
         pathRewrite:{
           //  如果后端接口中没有 '/api'  就需要这样配置
           '^/api': ''
         }
      }
    }
  }
}
 
//  配置完需要重启服务

环境文件

我们可以在.env.development和.env.production定义变量，变量自动就为当前环境的值

基础模板在以上文件定义了变量VUE_APP_BASE_API，该变量可以作为axios请求的baseURL

我们会发现,在模板中,两个值分别为/dev-api和/prod-api。

在request中设置baseUrl ：


const service = axios.create({
  // 如果执行 npm run dev  值为 /api 正确  /api 这个代理只是给开发环境配置的代理
  // 如果执行 npm run build 值为 /prod-api  运维应该在上线的时候 配置上 /prod-api的代理
  baseURL: process.env.VUE_APP_BASE_API, // 设置axios请求的基础的基础地址
  timeout: 5000 // 定义5秒超时
})

处理 axios 的响应拦截器

axios 发送请求响应回的数据经过响应拦截器判断, 失败了则提示错误, 返回 reject , 成功了则结构数据为 success、message、data 。如果success 为 true，返回data，如果为 false，提示错误，返回reject

service.interceptors.response.use(response => {
  // axios默认加了一层data
  const { success, message, data } = response.data
  //   要根据success的成功与否决定下面的操作
  if (success) {
    return data
  } else {
    // 业务已经错误了 还能进then ? 不能 ！ 应该进catch
    Message.error(message) // 提示错误消息
    return Promise.reject(new Error(message))
  }
}, error => {
  Message.error(error.message) // 提示错误信息
  return Promise.reject(error) // 返回执行错误 让当前的执行链跳出成功 直接进入 catch
})

主页的 token 拦截处理

访问权限拦截先会判断是否有 token

有 token 时，判断是否为登录页，是则跳到主页，否则放行通过

没有 token 时，判断是否在白名单中，是则放行通过，否则跳到登录页

const whiteList = ['/login', '/404']  // 定义白名单  即所有不受权限控制的页面
// 路由的前置守卫
router.beforeEach(function(to, from, next) {
  //  首先判断有无token
  if (store.getters.token) {
    //   如果有token 继续判断是不是去登录页
    if (to.path === '/login') {
      //  表示去的是登录页
      next('/') // 跳到主页
    } else {
      next() // 直接放行
    }
  } else {
    // 如果没有token
    if (whiteList.includes(to.path)) {
      // 如果找到了 表示在在名单里面
      next()
    } else {
      next('/login') // 跳到登录页
    }
  }
})