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 中{},[]中括号,大括号使用详解
May 12 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
vue实现列表滚动的过渡动画
Jun 29 Javascript
Javascript实现单选框效果
Dec 09 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
重置版游戏视频
2020/04/09 魔兽争霸
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
jquery实现上传图片功能
2020/06/29 jQuery
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python编码最佳实践之总结
2016/02/14 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
详解【python】str与json类型转换
2019/04/29 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python list多级排序知识点总结
2019/10/23 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
经管应届生求职信范文
2014/05/18 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
观看建国大业观后感
2015/06/01 职场文书
教师节大会主持词
2015/07/06 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
清明节随笔
2015/08/15 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers