Vue 总结

按键修饰符

<input @keyup.enter.native="submit">
<!-- 
  @keyup.enter  表示按回车键时触发
  .native  表示keyup是一个原生事件
 -->

跨域

在前后端分离项目中, 前端项目和后端接口并不在一个域名下, 当前端项目访问后端接口的时候就会产生跨域, 这是处于开发环境的跨域, 项目部署上线时的跨域是生产环境的

解决开发环境的跨域问题

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

这就是 vue-cli 配置 webpack的反向代理

//  在 vue.config.js 中配置

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

//  配置完需要重启服务

生产环境的跨域

生产环境表示项目开发完成, 将项目部署到服务器上, 这时没有 vue-cli 脚手架的辅助, 此时需要借助 Nginx 的反向代理来进行

server{
    // 监听9099端口
    listen 9099;
    // 本地的域名是localhost
    server_name localhost;
    // 凡是localhost:9099/api这个样子的，都转发到真正的服务端地址
    location ^~ /api {
        proxy_pass 服务端地址;
    }    
}

//  一般运维完成

处理 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') // 跳到登录页
    }
  }
})