laravel - Vue前端单页项目的用户认证思路-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

环境：

Backend：Laravel + Passport
Frontend：Vue 2.0 + Vuex + Vue-router

问题：

前端登陆后获取access_token,保存在localStorage中，那么用户退出登录的话需要怎么操作？清空localStorage吗？是否需要向后端再发送请求？

如果用户没有点击退出登录，而是直接关闭浏览器或者窗口呢，下次访问时，localStorage里的access_token依然存在，这样的话安全性不太好吧？

我的access_token的有效期是一年，那么每次登录都会重新生成，这个怎么解决？

求前端用户认证的处理思路……万分感谢！！！

滿天的星座

全部回复(4)

PHPz2017-05-16 16:49:44 4楼

退出时删除localStorage中的access_token。
可以给Vuex写个插件，每次commit mutation时，更新一下access_token的刷新时间。
下次登录时，判断这个刷新时间，5分钟前了，就认为登录信息过期了。

如果不想把access_token放到localStorage中，可以放在Vuex中，每次都需要重新登录。
重新登录时，你可以没必要都重新生成access_token吧。

赞 +0

添加回复

天蓬老师2017-05-16 16:49:44 3楼

刚好总结了一个项目，欢迎star~
【vue+axios】一个项目学会前端实现登录拦截

赞 +0

添加回复

黄舟2017-05-16 16:49:44 2楼

认证信息以后台为准，不管是登录还是退出都要发送请求，然后根据api返回的结果前端进行操作，如果不记住认证信息用sesionStorage好点

赞 +0

添加回复

大家讲道理2017-05-16 16:49:44 1楼

设置路由的拦截器，拦截除了login和logout的所有页面，检查本地变量user是否存在，存在则判断上次校验时间，如果超出1分钟则重新校验。

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
  //var auth = to.matched[0].default.auth;
  //console.log(to);
  if (to.path =="/login" || to.path =="/logout") {
    next();
  }
  else {
    const user = store.state.system.user;
    if(user){
      const time = new Date().getTime();
      if(time-user.lastCheckTime > 60*1000){ // 如果上次检查时间大于1分钟，则调用服务端接口判断session 是否依然有效
        store.dispatch("checkLogin",(error,isLogined)=>{ // 异步检查是否状态有效
          if(error || !isLogined){
            console.warn("登录超时");
            next({'path':'/login',query:{backUrl:to.fullPath}});
          }
          else{
            next();
          }
        });
      }
      else{
        next();
      }

    }
    else{
      console.warn("需要登录");
      next({'path':'/login',query:{backUrl:to.fullPath}});
    }
  }
});

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>