Vue3\React 模板 添加路由登录权限校验

• Vue3\React 模板 添加路由登录权限校验，以及修改 title
• 定义路由时候添加 meta 信息

{
  path: '/time',
  name: 'Time',
  meta: {
    title: '时间',
    needLogin: true,
    transitionName: 'router',
  },
  component: () => import('../pages/module-time/index.vue'),
}

• Vue3 路由守卫配置校验是否登录以及修改 title

router.beforeEach((to, from, next) => {
  // 如果需要登录
  if (to.meta.needLogin) {
    // 获取token
    const token = localStorage.getItem(KEY_TOKEN)

    // 如果有token 则直接放行
    if (token) {
      next()
    } else {
      // 否则去登录页
      ElMessage.error("请先登录！")
      next("/login")
    }
  } else {
    // 不需要登录则直接放行
    next()
  }
})

// 修改标题的工作可以放在全局后置守卫
router.afterEach((to) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

• React 的配置较为复杂，新增了一个用于校验登录权限的组件 RouterAuth ,新增了一个路由配置列表数据转换方法 transformRoutes ，最后将转换后的 page 直接挂到 App 组件上