更新于

router路由守卫之用户权限

发布于 / 分类: vue 项目实战 / 暂无评论 / 阅读量: 60

路由守卫一般用于判断用户是否登录,如果已登录,则进入页面,如果没有登录,则跳转到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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有545条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局