快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

怎么在Vue中利用beforeEach检查登录状态

这篇文章将为大家详细讲解有关怎么在Vue中利用beforeEach检查登录状态,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联主要从事网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务玄武,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

1.在登录请求接口时返回用户的信息,比如 userInfo:{userId:'123', userName:'小明'},登录成功之后将userInfo存入store中。

2.使用beforeEach实现登录状态检查

vueRouter.beforeEach((to, from, next) => {
  //store的getters中定义获取用户信息的函数 getUser
  //userId为空说明用户未登录
  let isLogin = store.getters.getUser.userId;
  if (!isLogin) {//未登录
    if (to.path !== '/login') {//跳转到登录页
      return next({path: '/login'});
    }else {
      next();
    }
  }else {//已登录
    if (to.path === '/login') {//跳转到首页
      return next({path: '/index'});
    }
    next();
  }
});

如果需要退出登录,只需要将保存在store中的用户信息置空即可。

关于怎么在Vue中利用beforeEach检查登录状态就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


本文名称:怎么在Vue中利用beforeEach检查登录状态
网页地址:http://6mz.cn/article/iideci.html

其他资讯