vue项目中如何进行登录控制(为什么要使用to.matched)

小灰灰 2021-09-08 19:18 247阅读 0赞

1.vue项目当中通常都是通过设置routes配置项来控制路由跳转，例如设置

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

routes:
    [
       {
          path: '/cinema',
          redirect: '/page/cinema',
          component: BlankLayout,
          meta: { title: '影院' , requiresAuth: true}
          children: [
            {
              path: '/cinema/plan',
              name: 'cinemaPlan',
              component: () => import('./views/cinema/Plan'),
              meta: { title: '影院排期' }
            },
            {
              path: '/cinema/cinemaDetail',
              name: 'cinemaDetail',
              component: () => import('./views/cinema/CinemaDetail'),
              meta: { title: '影院详情' }
            }
           ]
        }
    ]

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

利用routes中的meta属性添加一个字段，用作标识，首先假设在名为router.js的文件中定义router，具体代码如下：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

import Vue from  'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    const router  = new VueRouter({ routes })
    
    export router

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

接着在名为perssion.js的文件中结合路由守卫，进行登陆验证，另外这里如果用户登录成功之后，token会默认放在vuex中的getters中,所以在导航守卫中判断对应getters是否存在，如果存在，证明用户已登录，允许用户进入该路由。否则就跳转登陆页，并把当前页的路由座位query参数传递给login页面：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title}`))
      if (to.matched.some(record => record.meta.requiresAuth)) {
        // this route requires auth, check if logged in
        // if not, redirect to login page.
        if (!store.getters.token) {
          next({
            path: '/login',
            query: { redirect: to.fullPath }
          })
        } else {
          if (to.query.siteCode) {
            next()
            return
          }
          if (from.query.siteCode) {
            const query = JSON.parse(JSON.stringify(to.query))
            query.siteCode = from.query.siteCode
            next({
              path: to.path,
              query: query
            })
          } else {
            next() // 确保一定要调用 next()
          }
        }
    　}

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

2.主要说明下为什么要使用遍历to.matched数组判断meta的requiresAuth字段，而不直接使用to.meta.requiresAuth来判断，首先例子当中给的是cinema,也即是1级路由设置了requiresAuth.而cinemaPlan没有设置。假设两种情况：

前提：vue路由匹配时会同时匹配满足情况的所有路由，即如果路由是‘/cinema/plan’的话，‘/cinema’也会触发。另外如果较高等级的路由需要登录控制的话，它所有的嵌套路由都是基本需要登录控制的。

（1）cinema具有登录控制，而cinemaPlan 没有。**如果用户正常点击路由跳转的话**，它必然是先进一级路由，再去二级路由，一级路由实现登录控制，利用to.meta是能够满足的，注意这里是用户正常点击，但是假如有用户直接改变url地址的话去访问cinemaPlan的话，则需要给cinemaPlan路由添加requiresAuth字段，同理也需要给cinemaDetail添加字段，如果路由比较多的话，就会很麻烦。

（2）cinema没有登录控制，而cinemaPlan有。这种情况确实不怕用户直接改变url访问二级路由了，但是同样如果过多二级路由，也是需要设置许多requiresAuth。

所以，为了方便，直接遍历to.matched数组，该数组中保存着匹配到的所有路由信息。就该例而言，访问cinema时，matched数组长度为1，访问cinemaPlan时，matched数组长度为2，即保存着‘/cinema’以及‘/cinema/plan’。其实啰嗦了这么多，直接使用to.meta判断字段也可以，就是需要给所有需要控制的路由添加requiresAuth。而**to.matched则只需要给较高一级的路由添加requiresAuth即可，其下的所有子路由不必添加**。

![22cbc84d6349888f93d6349774699fe0.png][]

[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20210908/f3684540a08f458faad3aa67668d4afc.png
[22cbc84d6349888f93d6349774699fe0.png]: /images/20210908/a5f495a19aec4417be532d1266f8e922.png