Vue登录注册并保持登录状态的方法


Posted in Javascript onAugust 17, 2018

关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法。

项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等

有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等

那如何判断路由是否需要登录呢?就要在路由JS里面做文章

在router.js中添加meta区分

比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置为false

{
 //登录
 path: '/login',
 component: login,
 meta: {
  isLogin: false
 }
},
{
 //注册
 path: '/register',
 component: register,
 meta: {
  isLogin: false
 }
},

而在首页我们需要登录才能进入,那么我们把meta中的isLogin标志设置为true

{
 //首页
 path: '/home',
 component: home,
 meta: {
  isLogin: true
 },
}

这样我们就为进入各个路由是否需要登录做了区分。

接下来我们在login.vue中修改登录后状态

我们使用axios向后台发起登录请求

this.$axios.post("/xxx/login", {user:name,password:pwd})
  .then(data => {
    //登录失败,先不讨论
    if (data.data.status != 200) {
     //iViewUi的友好提示
     this.$Message.error(data.data.message);
    //登录成功
    } else {
     //设置Vuex登录标志为true,默认userLogin为false
     this.$store.dispatch("userLogin", true);
     //Vuex在用户刷新的时候userLogin会回到默认值false,所以我们需要用到HTML5储存
     //我们设置一个名为Flag,值为isLogin的字段,作用是如果Flag有值且为isLogin的时候,证明用户已经登录了。
     localStorage.setItem("Flag", "isLogin");
     //iViewUi的友好提示
     this.$Message.success(data.data.message);
     //登录成功后跳转到指定页面
     this.$router.push("/home");
    }
 });

Vuex里面我是这样写的(如果项目不需要Vuex,那么直接使用HTML5储存就可以了):

export const store = new Vuex.Store({
 // 设置属性
 state: {
  isLogin: false,
 },

 // 获取属性的状态
 getters: {
  //获取登录状态
  isLogin: state => state.isLogin,
 },

 // 设置属性状态
 mutations: {
  //保存登录状态
  userStatus(state, flag) {
   state.isLogin = flag
  },
 },

 // 应用mutations
 actions: {
  //获取登录状态
  setUser({commit}, flag) {
   commit("userStatus", flag)
  },
 }
})

重点来了~,在mian.js里

router.beforeEach((to, from, next) => {

 //获取用户登录成功后储存的登录标志
 let getFlag = localStorage.getItem("Flag");

 //如果登录标志存在且为isLogin,即用户已登录
 if(getFlag === "isLogin"){

  //设置vuex登录状态为已登录
  store.state.isLogin = true
  next()

  //如果已登录,还想想进入登录注册界面,则定向回首页
  if (!to.meta.isLogin) {
    //iViewUi友好提示
   iView.Message.error('请先退出登录')
   next({
    path: '/home'
   })
  }
 
 //如果登录标志不存在,即未登录
 }else{

  //用户想进入需要登录的页面,则定向回登录界面
  if(to.meta.isLogin){
   next({
    path: '/login',
   })
   //iViewUi友好提示
   iView.Message.info('请先登录')
  //用户进入无需登录的界面,则跳转继续
  }else{
   next()
  }

 }

});

router.afterEach(route => {
 window.scroll(0, 0);
});

这样就已经完成了Vue的登录注册,当用户关闭浏览器或者第二天再次进入网站,用户依旧可以保持着登录的状态直到用户手动退出登录。

Tips:用户退出只需要localStorage.removeItem("Flag")即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
基于jquery的气泡提示效果
May 31 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
Javascript高级技巧分享
Feb 25 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
小程序清理本地缓存的方法
Aug 17 #Javascript
layui table设置前台过滤转义等方法
Aug 17 #Javascript
详解小程序缓存插件(mrc)
Aug 17 #Javascript
layui 设置table 行的高度方法
Aug 17 #Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 #Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 #jQuery
layui的table中显示图片方法
Aug 17 #Javascript
You might like
PHP&MYSQL服务器配置说明
2006/10/09 PHP
php中autoload的用法总结
2013/11/08 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
node.js中的console用法总结
2014/12/15 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python 提取文件的小程序
2009/07/29 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python属于解释语言吗
2020/06/11 Python
python实现学生管理系统开发
2020/07/24 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
运动会广播稿80字
2014/01/23 职场文书
小学少先队活动总结
2015/05/08 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Python使用MapReduce进行简单的销售统计
2022/04/22 Python