nuxt整合cookie解决方案

2020-07-16 02:10:29  晓掌柜  版权声明:本文为站长原创文章,转载请写明出处


一、背景

    最近在做一个新模块,并且在需要用户登录的地方使用了第三方登录。在记录一些信息时有用到cookie。

期间也菜了不少坑,所以这里记录下。前车之鉴,后车之师,希望对自己和他人能产生一定的帮助。


二、流程梳理

    在这个流程的构建中,经历了一下阶段:

        ① 在用户交互时检测有无现存的信息,如果有直接使用,没有则调起第三方登录(QQ)
        ② QQ登录成功后由一个回调地址,在这里把用户的信息写入到cookie中,用于交互行为的记录
        ③ cookie默认设置为过期时间1天,过期后需重新登录


三、解决方案

    3.1、安装依赖

        首先我这边使用的是 vue-cookie这个产品,所以第一步先进行安装:

         npm install vue-cookies --save

    3.2、声明并引用

        安装完成后在页面中进行声明,具体代码如下:

         import Vue from 'vue'

         import VueCookies from 'vue-cookies'

         Vue.use(VueCookies)

    3.3、设值和取值

        我所用到的相关操作如下(附上git链接,有兴趣可以去看看vue-cookie):

        设值:$cookies.set("authInfo", res.data);

        取值:$cookies.get("authInfo");


四、喜闻乐见的踩坑环节

    4.1、同源

       这里着重提一下的是我的登录回调的地址是www.guangmuhua.com 于是乎在使用guangmuhua.com操作时竟然不能正常获取cookie

       最终解决方案如下:定义domain属性即可 $cookies.set("authInfo", res.data, null, null, "guangmuhua.com");

    4.2、附属资料

        同时本着学习的态度去查了下资料,整理如下:



    更多精彩请关注guangmuhua.com


最新评论:

后续更新整个模块的构建思路及流程实现。
2020-07-22 21:20:25
1楼