• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

router路由守卫之用户权限

路由守卫一般用于判断用户是否登录,如果已登录,则进入页面,如果没有登录,则跳转到login页,并且记住跳转之前的路径页,方便登录成功后自动跳转到之前的页面。

router.beforeEach((to, from, next) => {
  const user = store.getters.user
  if (to.matched.some(r => r.meta.private) && !user) {
    next({
      name: 'login',
      params: {
        wantedRoute: to.fullPath,
      },
    })
    return
  }
  if (to.matched.some(r => r.meta.guest) && user) {
    next({ name: 'home' })
    return
  }
  next()
})

user 为从vuex中获取用户。

首先第一个if是判断当前的路由页面所有路由信息,matched是一个数组,它包含一个或者多个{}对象,对象为路由信息,我们就通过数组的some遍历这些对象,判断这些对象里面有没有我们预设的信息,假设我们给主页home设置的了一个meta。

这个meta对象里面有一个键值对为private:true

用来表示这是个一个私人页面,你必须登录才能进入,所以我们在路由守卫的里面进行判断,当前页面有这个值,并且用户存在,才能next进入。

如果不存在则跳转到login,并且把当前路由页面的路径做为一个路由参数params对象的一个键值对传递wantedRoute: to.fullPath到下一个路由中

当用户登录成功,我们就可以从params获取到上一个路径,然后跳转回去。

第二个if用于判断,如果用户登录了,进入的却是一个只有来宾,也就是未登录时才能访问的页面,我们要自动跳到home页。

注意:

一定要有一个next,哪怕你写了很多if,也要有一个独立的next用于正常进入路由。

一般我们都是在vuex的action里面进行异步登录的

 actions: {
     async login({commit}) {
         try {
             const user = await $fetch("user");
             commit("user", user);
             if (user) {
                 router.replace(router.currentRoute.params.wantedRoute || {
                     name: 'home'
                 })
             }
         } catch (e) {
             console.warn(e);
         }
     },
     logout({commit}) {
         commit("user", null);
         $fetch('logout');
         if (router.currentRoute.matched.some(r => r.meta.private)) {
             router.replace({
                 name: 'login',
                 params: {
                     wantedRoute: router.currentRoute.fullpath
                 }
             })
         }
     }
 }

这里我们可以看到,我们login登录后,判断user是否存在,如果存在就进行replace跳转。

其中router.currentRoute.params.wantedRoute为我们之前在跳转到login页时存储的路径信息。

如果没有这个路径,我们就默认跳转至首页

退出的时候,我们要判断当前的路由页是否为私人页面,如果是,进行replace跳转,并且把当前的路由路径保存到params的键值对wantedRoute: router.currentRoute.fullpath

0
  • 本文分类:vue 项目实战
  • 本文标签:暂无标签
  • 流行热度:已超过 132 人围观了本文
  • 最后更新:2020年04月28日 - 21时22分35秒
  • 发布日期:2020年04月28日 - 21时22分35秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码