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 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
jquery操作select方法汇总
Feb 05 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
js实现验证码干扰(动态)
Feb 23 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
js中if语句的几种优化代码写法
2011/03/12 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
机器学习10大经典算法详解
2017/12/07 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
点球小游戏python脚本
2018/05/22 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Python安装Bs4的多种方法
2020/11/28 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
护士毕业实习感言
2014/03/05 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
Python实现socket库网络通信套接字
2021/06/04 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android