2020/08/03 工作笔记之我对cookie以及localStorage以及sessionStorage的区别

在文哥发给我以下的聊天内容后，我才恍然明白，之前我做的vue项目中存储token到sessionStorage中和文哥说的将token存储到cookie之间的练习，其实二者都是本质都是一样的，都是为了存储用户的token然后来判断用户是否具有token来操作的。
文哥记录如下：
token是你登录以后后端给你的 前端存在cookie里 每次请求要在cookie里拿出来带着 一般是request 的header里面有个authorization属性来存放token验证 但有些也不一样 具体看前后端的约定服务器拿到token要验证湿不湿它签发的是不是过期是不是合法之类的 全部OK才能给你response 不然就给你401或者403

而在我的项目中，用storage存储token如下：

 async AjaxInsert() {
            let rulg = /^.{6,16}$/
            if(rulg.test(this.model.username)&&rulg.test(this.model.password)){
                const res =  await this.$http.post('/login',this.model)
                this.$msg.fail(res.data.msg)
                if(res.data.code == 301 || res.data.code == 302){
                    return
                }
                localStorage.setItem('token',res.data.token)
                localStorage.setItem('id',res.data.id)
                setTimeout(() => {  
                    this.$router.push('/userinfo')
                },1000)
            }else{
                this.$msg.fail('格式不正确,请重新输入!')
            }
        }

注意在vue中，我们好像需要在请求头中去携带token传到后台去，这就和文哥所说的内容本质一样，都需要传递token给服务器辨认，然后我们在vue中是利用请求拦截器去携带token的，代码如下：

http.interceptors.request.use(function(config) {
    // 发送请求之前就执行这个函数 即成功就执行第一个函数 失败就执行第二个函数
    if (localStorage.getItem('token') && localStorage.getItem('id')) {
        config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
    }
    return config;
}, function(error) {
    // 对错误进行操作的函数 以下是返回一个返回一个带有拒绝原因的Promise对象
    return Promise.reject(error);
});

然后注意在vue中，我们还需要在路由当中进行设定，这在本质上也是为了区分，页面如果没有token将不可访问的知识点。

    // 一般我们除了登录以及注册都需要进行meta的判断这个是需要注意的。
    // meta用以权限认证
router.beforeEach((to, from, next) => {
    if ((!localStorage.getItem('token') || !localStorage.getItem('id')) && to.meta.istoken == true) {
        router.push('/login')
        Vue.prototype.$msg.fail('请重新登录')
        return
    }
    next()
})

而存储到cookie中我并没有接触过，以后遇到代码了得稍微注意一下
要是看到这篇工作日记得大佬麻烦给我说一下，谢谢。