使用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>