小米技术点总结-axios，cookie，传参

技术点分析

1.cookie----https://www.jianshu.com/p/6fc9cea6daa2

作用：用于与后端进行交互，cookie小米中，cookie失效相当于没有了uid，每次请求的时候，没有了uid，后台就会返回res.status == 10，后续可以看响应拦截那里。

用法：

注意：除了安装依赖之外-----跨域访问需要发送cookie时一定要加 ， axios.defaults.withCredentials = true;

A.第一安装依赖，先在mian.js 里面引入import VueCookie from “vue-cookie”;全局配置：Vue.use(VueCookie);

B.在login.vue开始使用，用来保存用户id

用法

 this.$cookie.set("需要存储的自定义名称", 存储的值, 第三个参数是有效期);
//不设置有效期，默认cookies失效时间是直到关闭浏览器
//例子：--注意 一般情况下expires该属性代表的是天数。如果需要用它设置少于一天时，看下面第3例子
//1.创建一个7天后过期的cookie，在整个站点中有效： 
 this.$cookie.set('name','value',{expires:7});        
//2、当设置的失效时间大于等于1天时，我们可以在 expires 属性后面直接输入XX天数
 this.$cookie.set('name', 'value', {
expires: 7,
});
//3、当设置的失效时间少于一天时：我们需要在当前的时间上加上失效时间。
//例如下面是设置cookie的失效时间为15分钟。
var millisecond = new Date().getTime();
var expiresTime = new Date(millisecond + 60 * 1000 * 15); 
 this.$cookie.set('name', 'value', {
expires: expiresTime,
});                                         
//**获取cookie ：**
 this.$cookie.get('name');//=>'值'  
//**删除Cookie：让他立即过期
  this.$cookie.set("name", "", { expires: "-1" });                        

   var millisecond = new Date().getTime();
   var expiresTime = new Date(millisecond + 60 * 1000 * 15);      
   this.$cookie.set( 'userName',1, {expires:expiresTime});

我当前时间为2020/9/23 9:33 下面是上例子f12里面的结果：因为这里时间是标准时间，我们是东八区比他快8个小时**

注意----相差8小时，我们位于东八区比标准时间相差8小时

  this.$cookie.set("userId", res.id, { expires: "Session" });
这里的第三个参数，也是设置有效期，与sessionstorage消失时间一样，浏览器关闭时消失。注意：不设置的话默认也是一样的，关闭浏览器失效，设置了增加代码易读性

//看不明白,看下面真实例子
login() {
      // let { username, password } = this;
      this.axios
        .post("/manager/menuBar/enable", {
          "menuBarId": "menuBarId1111111111111111"  
        })
        .then((res) => {
          // cookie过期时间与session时间一致
          this.$cookie.set("userId", res.id, { expires: "Session" 			});
          this.saveUserName(res.username);
          this.$router.push("/index");
        });
    },

2.axios的响应拦截（意思是请求后反应回来的数据进行拦截分析-失败或者成功）

开始代码分析

axios.interceptors.response.use(
    function(response) {
        // console.log(response.data);
        let res = response.data;
        // 获取response数据 ,按f12 =》Network=》看请求的response数据返回值
        let path = location.hash;//获取地址栏地址
        // 根据环境变量来获取不同的请求地址
        // 没错误返回0  错误·拦截
        if (res.status == 0) {
            return res.data;
        } else if (res.status == 10) {
            //res.status是后台定义的错误，接口请求不成功，就回10
            //出现这种情况有可能是本地存储的uid不存在，或者cookie过期
            if (path != "#/index") {
                window.location.href = "/#/login";
            }
            return Promise.reject(res);
        } else {
            this.$message.warning(res.msg);
            return Promise.reject(res);
        }},
    (error) => {
        let res = error.response;
        //请求不成功，响应进行报错拦截
        this.$message.error(res.data.message);
        //这个是element ui封装过后的弹出框
        return Promise.reject(error);
        //返回错误 显示在console里面
    }
);

3.传参

第一种：页面刷新数据不会丢失

// 方式 
this.$router.push({ path: `/particulars/${id}`, })
//路由配置
{ path: '/particulars/:id', name: 'particulars', component: particulars }
//获取参数
this.$route.params.id

第二种：页面刷新数据会丢失

// 方式 
this.$router.push(
    { 
        name: 'particulars',
        params: { id: id } 
    } )
//路由配置
{ path: '/particulars', name: 'particulars', component: particulars }
//获取参数
this.$route.params.id

第三种：

//方式
this.$router.push(
    { path: '/particulars', 
     query: { id: id }
    })
//路由配置
{ path: '/particulars',
    name: 'particulars', 
        component: particulars
}
// 获取参数 
this.$route.query.id

4.页面跳转

//第一种 
<routerЬlink to="/index"><button>跳转</button> </routerЬlink> 
//第二种 
this.$router.push('/inddex'); 
// 第三种 
this.$router.replace('/inddex'); 
//第四种 
 this.$router.go(n); 
//第五种 
 location.href = '/#/index';