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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
事件绑定之小测试  onclick && addEventListener
Jul 31 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
js实现显示手机号码效果
Mar 09 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
vue props default Array或是Object的正确写法说明
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 判断网页是否是utf8编码的方法
2014/06/06 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
常用简易JavaScript函数
2009/04/09 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
EasyUI创建人员树的实例代码
2017/09/15 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
对python中Json与object转化的方法详解
2018/12/31 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
python实现马丁策略的实例详解
2021/01/15 Python
介绍一下linux的文件系统
2015/10/06 面试题
金融行业务员的自我评价
2013/12/13 职场文书
大学校运会广播稿
2014/02/03 职场文书
求职意向书范文
2014/04/01 职场文书
新闻发布会策划方案
2014/06/12 职场文书
保研专家推荐信范文
2015/03/25 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
高中地理教学反思
2016/02/19 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle