第4讲：VUE3工程中集成页面级权限验证和百度统计代码。

最新推荐文章于 2025-08-28 01:12:17 发布

原创

最新推荐文章于 2025-08-28 01:12:17 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #百度 #webpack

本文介绍如何在Vue3工程中实现页面级权限验证，通过在路由的meta中定义权限级别，并在src/router/index.ts中进行相关配置。同时，教程也详细讲解了如何集成百度统计，包括在src/main.ts中添加统计代码，public/index.html中插入JS以及在百度统计后台启用单页应用统计。

VUE3中此处使用路由的meta定义页面需要的权限级别来控制权限。

在src/router/index.ts中修改如下。

  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { auth: 2 }
  },
  {
    path: '/user/login',
    name: 'UserLogin',
    component: () => import(/* webpackChunkName: "user" */ '../views/user/login.vue')
  },
  {
    path: '/user/reject',
    name: 'UserReject',
    component: () => import(/* webpackChunkName: "user" */ '../views/user/reject.vue')
  }

在src/router/index.ts中定义用户登录后的信息。

  state: {
    user: {
      token:1,
      auth:1
    }
  },

在src/main.ts中，增加路由权限判断和百度统计代码。

//权限检查和百度统计
router.beforeEach((to: any) => {
  //百度统计代码
  if(window._hmt && to.path) {
    window._hmt.push(['_trackPageview', '#' + to.path]);
  }
    
  const userInfo: any = ( store && store.state && store.state.user ) || {};