Cookie存用户登录数据

前期准备：

        npm install js-cookie --save

        在使用前导入：

import Cookies from 'js-cookie';

代码：

Cookies可以理解成前端一个小型的key-value数据库，通过Cookies.set(name,value)来存储数据，具体的各项操作可以参考https://blog.csdn.net/fay_ren/article/details/121659064

    login(){
      let data = {username: this.ruleForm.username, password: this.ruleForm.password}
      HttpManager.login(data).then((resp)=>{
        const result = resp as ResponseBody;
        if(result.type=='error'){
        alert(result.message);
        }else {
          Cookies.set('userid', result.data.id);
          Cookies.set('usertype', result.data.role);
          if (result.data.role == 2 || result.data.role == 3) {
            this.$router.push('/Info');
          } else {
            this.$router.go(0);
          }
        }
      })
    }

存好值后使用：

 

Cookies.get('userid');
Cookies.get('usertype');

可在浏览器控制台中用document.cookie查看目前存储的cookie值。

 因为Cookie很小，一般不存储超过4kb的数据，可以添加在set时添加expire选项设置失效时间。当数据量较大时可以考虑使用localstorage和sessionstorage。其中sessionstorage只能存字符串对象，想存JSON数据类型要先转换为字符串。

例：

sessionStorage.setItem("userList",JSON.stringify(result.data));
console.log(sessionStorage.getItem("userList"));
//读取时 const userList =   JSON.parse(sessionStorage.getItem("userList"));