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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
js获取滚动距离的方法
May 30 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Form表单上传文件(type="file")的使用
Aug 03 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
微信小程序框架的页面布局代码
Aug 17 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+DBM的同学录程序(1)
2006/10/09 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP速成大法
2015/01/30 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
keras K.function获取某层的输出操作
2020/06/29 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
社会公德演讲稿
2014/05/20 职场文书
施工员岗位职责范本
2015/04/11 职场文书