vue的prototype和拦截器

Vue.prototype 官网地址

如果需要设置全局变量，在main.js中，Vue实例化的代码里添加。

不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

Vue.prototype.$appName = ‘My App’

这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。如果我们运行：

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

则控制台会打印出 My App。就这么简单！  $appName前面的$主要为了区分，防止重名。

 

Vue 拦截器

 

• 拦截器： 对特定的http请求或响应消息或请求头进行验证，拦截不合法的http交互以保证web环境的安全。
• 拦截器起一个拦截作用拦，在请求接口时，多一次或多次验证。例如：你写了几个请求数据的接口，开启服务后，用户没登录直接访问这些接口，也是可以拿到数据的，但这就违背了后台管理系统必须先登录的原则，一些不良用心的人就会利用这个漏洞来窃取你的数据库数据了。这时就需要到拦截器了。
• 前后台交互一定要遵循一个原则：互不信任原则。前端发送到后台的参数（必须在前端验证合法的才能发送），后台必须验证是否合法（是否符合该参数的原定数据类型和值范围），后台返回给前端的数据，也必须验证是否为约定的数据结构和值类型。

拦截器原理和实现

• 这里引用第三方的ajax库 –> axios
• axios： 基于ES6新语法promise的一个前端ajax库

   // http请求拦截
    axios.interceptors.request.use(config => {
       //请求拦截
        return config;
    });
    // http响应拦截
    axios.interceptors.response.use(response => {
        //响应拦截
        return response;
    });