nuxt实现自动登录功能

小鱼儿 2022-04-12 12:28 521阅读 0赞

1，实现逻辑

1）登录时用户勾选自动登录后，将用户的登录信息（一般为账号和密码）储存到本地cookie（localStorage同），并设置一个过期时间；

2）用户退出后下次进入页面，若本地cookies时间没有过期，则获取用户的登录信息，调用登录接口执行登录，即省去用户点击登录那一步；

3）若用户没有勾选自动登录，则将自动登录的cookie清除

2.实现代码

<el-checkbox v-model="autoLogin">自动登陆</el-checkbox>

登录后根据是否勾选了自动登录来存入登录信息到cookie还是从cookie清除登录信息

let _self = this;
    this.$axios
    .post(this.signInApi, this.signInData)
    .then(function(res) {
       //返回101则为登录成功
       if(res.Code === 101){
           // 是否自动登录 储存7天
           if (_self.autoLogin) {
              //存储cookie
               _self.$cookies.set('autoLogin', {
                  type: 'phone',
                  phone: _self.signInData.phone,
                  password: _self.signInData.password,
               }, {
                  path: '/',  //设置cookie为路由的跟路径，对整个网站有效
                  maxAge: 60 * 60 * 24 * 7  //设置cookie过期时间为7天
               });
           } else {
               _self.$cookies.remove('autoLogin', { path: '/' });
           }
               //fullPath为登录前的地址，登录成功后跳转到登录前的浏览地址
               //fullPath可以从nuxt的asyncData的from参数中获取
               let path = _self.fullPath || '/';
               _self.$router.push({ path: path.indexOf('/verify') === 0 ? '/' : path });
           }
    })
    .catch(function(error) {
    
    });

用户退出后再次进入登录时判断是否需要自动登录

layouts/default.vue

let autoLogin = this.$cookies.get("autoLogin");
            if (autoLogin) {
              this.$axios.post(this.signInApi, autoLogin)
              .then((res) => {
                if(res.Code === 101){
                  //登录成功
                }
              })
              .catch((error) => {
                  
              });
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，521人围观）

还没有评论，来说两句吧...

相关阅读

相关 IGeekShop案例11-自动登录功能的基本实现

IGeekShop案例11-自动登录功能的基本实现 1 login.jsp代码 ![在这里插入图片描述][20190827110509211.png] 2 ...

以你之姓@/ 2024年04月17日 14:12/ 0 赞/ 7 阅读

相关 java 自动登录_java代码实现自动登录功能

通常我们登录某网站，会有选择保存几天，或者是几个星期不用登录，之后输入该网站地址无需登录直接进入主页面，那么这就叫做自动登录，怎么实现呢，下面我以一个小例子来演示一下登录页

ゝ一世哀愁。/ 2022年11月01日 14:59/ 0 赞/ 216 阅读

相关自动登录功能的实现

一.在login.jsp文件中设置： <div align="center"> <h1>Estore\_登录</h1> <font color="r

向右看齐/ 2022年09月30日 14:00/ 0 赞/ 265 阅读

相关网站自动登录功能实现

功能：第一次登录时，勾选自动登录，关闭浏览器，再次打开，系统会自动进行用户已经登陆状态实现用户自动登录的过滤器：在用户登录成功后，以cookis形式发送用户名、密

àì夳堔傛蜴生んèń/ 2022年07月13日 05:53/ 0 赞/ 231 阅读

相关实现30天自动登录功能的那些坑

实现30天自动登录功能的思路（以原始servlet开发为例）：一、在LoginServlet中获取jsp页面提交过来的用户名和密码、 String name = requ

ゞ浴缸里的玫瑰/ 2022年05月25日 02:45/ 0 赞/ 164 阅读

相关实现简单的自动登录功能

框架ssm,使用拦截器+cookie+session来进行自动登录。使用拦截器需要在pringmvc的配置文件中进行注册拦截器。

灰太狼/ 2022年05月23日 04:41/ 0 赞/ 316 阅读

相关登录功能实现

登录模板包括登录、登出、购物车数量查询、全局拦截 routes/user.js 引入user模型 var User = require('./../models/user

「爱情、让人受尽委屈。」/ 2022年04月14日 05:54/ 0 赞/ 271 阅读

相关 nuxt实现自动登录功能

1，实现逻辑 1）登录时用户勾选自动登录后，将用户的登录信息（一般为账号和密码）储存到本地cookie（localStorage同），并设置一个过期时间； 2）用户退出后下

小鱼儿/ 2022年04月12日 12:28/ 0 赞/ 522 阅读

相关自动登录功能

下面记录并分享一下自动登录功能的实现：一、自动登录 1）登录功能是用Session实现的，就是向Session对象中保存当前用户的对象 2）自动功能用Cookie实

朴灿烈づ我的快乐病毒、/ 2021年09月28日 15:06/ 0 赞/ 400 阅读

相关 Nuxt自动路由

一基础路由 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。下边是一个基础路由的例子：假设 pages 的目录结构如下：

墨蓝/ 2021年07月24日 23:45/ 0 赞/ 457 阅读