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 自动完成脚本整理(33个)
Oct 20 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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 - Html Transfer Code
2006/10/09 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python中的for循环
2018/09/28 Python
python开头的coding设置方法
2019/08/08 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
学习三严三实心得体会
2014/10/13 职场文书
赢在中国观后感
2015/06/02 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书