通过 Vue Router 提供的路由元信息功能实现前端路由权限判断

在这篇教程中，我们来构建 Roast 应用管理后台前端 UI，首先，我们为管理后台初始化创建以下子目录：

• /resources/assets/js/api/admin
• /resources/assets/js/components/admin
• /resources/assets/js/modules/admin
• /resources/assets/js/pages/admin

第一步：创建管理后台布局文件 Admin.vue

然后我们在 resources/assets/js/layouts 目录下为管理后台创建一个新的布局文件 Admin.vue，并初始化代码如下：

<style lang="scss">
    @import '~@/abstracts/_variables.scss';
</style>

<template>
    <div id="admin-layout">
        <success-notification></success-notification>
        <error-notification></error-notification>

    </div>
</template>

<script>
    import SuccessNotification from '../components/global/SuccessNotification.vue';
    import ErrorNotification from '../components/global/ErrorNotification.vue';

    export default {
        components: {
            SuccessNotification,
            ErrorNotification
        }
    }
</script>

第二步：为管理后台定义前端路由

打开前端路由文件 resources/assets/js/routes.js，与 / 路由并列定义一个新的 admin 路由：

{
    path: '/admin',
    name: 'admin',
    component: Vue.component('Admin', require('./layouts/Admin.vue')),
    beforeEnter: requireAuth,
}

这个路由会导航到管理后台首页，并且使用了导航守卫，表明需要登录后才能访问，但是我们在上一篇教程定义管理后台后端路由的时候，还在路由上应用了 owner 中间件以确保管理员才能访问管理后台，那么在一个前后端分离应用中，我们能否在 Vue Router 中实现类似的权限判断功能呢？答案是可以，我们可以借助 Vue Router 提供的路由元信息功能帮我们在前端路由中实现权限判断。

借助路由元信息功能在前端路由中实现权限判断

如果你之前没用过 Vue Router 的路由元信息功能，建议阅读官方文档快速了解下，这个功能非常简单，就是在路由定义中新增一个 meta 字段，然后将我们的元信息数据塞到 meta 对象中。

下面我们在所有需要权限判断的前端路由中加入路由元信息：

{
     path: 'new',
     name: 'newcafe',
     component: Vue.component( 'NewCafe', require( './pages/NewCafe.vue' ) ),
     beforeEnter: requireAuth,
     meta: {
         permission: 'user'
     }
},

{
     path: 'cafes/:id/edit',
     name: 'editcafe',
     component: Vue.component('EditCafe', require('./pages/EditCafe.vue')),
     beforeEnter: requireAuth,
     meta: {
         permission: 'user'
     }
 },

 {
     path: 'profile',
     name: 'profile',
     component: Vue.component('Profile', require('./pages/Profile.vue')),
     beforeEnter: requireAuth,
     meta: {
         permission: 'user'
     }
 },

{
      path: '/admin',
      name: 'admin',
      component: Vue.component('Admin', require('./layouts/Admin.vue')),
      beforeEnter: requireAuth,
      meta: {
          permission: 'owner'
      },
      children: [
          {
              path: '_=_', 
              redirect: '/'
          }
      ]
}

我们在路由元信息中设置了一个 permission 字段用于标识该路由所需要的权限级别，具体的权限判断逻辑定义在 requireAuth() 方法的内部函数 proceed() 中，下面我们更新 proceed() 方法如下：

function proceed() {
    // 如果用户信息已经加载并且不为空则说明该用户已登录，可以继续访问路由，否则跳转到首页
    // 这个功能类似 Laravel 中的 auth 中间件
    if (store.getters.getUserLoadStatus() === 2) {
        if (store.getters.getUser !== '') {
            // 下面根据路由元信息中提供的权限级别判断登录用户是否具备相应权限
            switch (to.meta.permission) {
                // 如果权限级别是普通用户则继续
                case 'user':
                    next();
                    break;

                // 如果权限级别是商家则需要判断用户角色是否满足
                case 'owner':
                    if (store.getters.getUser.permission >= 1) {
                        next();
                    } else {
                        next('/cafes');
                    }
                    break;

                // 如果权限级别是管理员则需要判断用户角色是否满足
                case 'admin':
                    if (store.getters.getUser.permission >= 2) {
                        next();
                    } else {
                        next('/cafes');
                    }
                    break;

                // 如果权限级别是超级管理员则需要判断用户角色是否满足
                case 'super-admin':
                    if (store.getters.getUser.permission === 3) {
                        next();
                    } else {
                        next('/cafes');
                    }
                    break;
            }
        } else {
            next('/');
        }
    }
}

这样，我们就实现了前端路由用户权限判断功能，对于没有权限的用户会导航到应用首页，你现在可以重新编译前端资源，访问管理后台入口页面 http://roast.test/#/admin 试试。