使用Vue开发中遇到的登录验证和用户权限管理问题

// 在login组件中进行登录操作
methods: {
  login() {
    // 调用登录接口，获取token
    axios.post('/api/login', { username: this.username, password: this.password })
      .then(response => {
        // 登录成功后将token存储到localStorage
        localStorage.setItem('token', response.data.token);
        // 跳转到主页
        this.$router.push('/home');
      })
      .catch(error => {
        console.error(error);
      });
  }
}

// 在router/index.js中定义路由守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    // 如果页面需要登录验证，且用户未登录，则跳转到登录页
    next('/login');
  } else if (token && to.meta.roles) {
    // 如果用户已登录，且页面需要特定角色的权限
    const role = 'admin'; // 假设当前用户的角色为admin
    if (to.meta.roles.includes(role)) {
      // 用户角色符合要求，可以访问页面
      next();
    } else {
      // 用户角色不符合要求，跳转到无权限页面
      next('/403');
    }
  } else {
    next();
  }
});

<template>
  <div>
    <h1 v-if="hasPermission">有权限的页面内容</h1>
    <h1 v-else>无权限的页面内容</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasPermission: false
    };
  },
  mounted() {
    // 在组件加载时判断用户是否有权限
    const token = localStorage.getItem('token');
    if (token) {
      const role = 'admin'; // 假设当前用户的角色为admin
      if (this.$route.meta.roles.includes(role)) {
        this.hasPermission = true;
      }
    }
  }
};
</script>