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 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
js操作iframe父子窗体示例
May 22 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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新手上路(九)
2006/10/09 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
如何用php获取文件名后缀
2013/06/09 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python字典按照value排序方法
2020/12/28 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
电焊工岗位职责
2014/03/06 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
大学生英语演讲稿
2014/04/24 职场文书
优秀员工推荐信
2014/05/10 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
统计学教授推荐信
2014/09/18 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书