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事件实现代码
Mar 12 Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
详解Vue中一种简易路由传参办法
Sep 15 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与Mysql的一些简单的操作
2015/02/26 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
Js基础学习资料
2010/11/23 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python在非root权限下的安装方法
2018/01/23 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
违纪检讨书2000字
2014/02/08 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
单位委托书格式范本
2014/09/29 职场文书
小学班主任工作随笔
2015/08/15 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
react 路由Link配置详解
2021/11/11 Javascript
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python