Laravel+Vue：根据用户角色控制元素显示与隐藏

1. 初始化组件数据 #

在Vue组件的data选项里定义状态变量，用来存储用户角色判断结果和控制元素显示的开关：

data() {
  return {
    isAdmin: false,
    value: false
  }
}

2. 获取角色并执行判断 #

在组件的mounted钩子中用Axios请求后端接口拿到用户角色，再根据结果设置显示状态：

mounted() {
  // 替换为实际的后端接口地址，接口需返回用户角色信息，格式示例：{ role: 'Admin' }
  axios.get('/api/current-user-role')
    .then(res => {
      const userRole = res.data.role;
      // 判断角色是否为Admin，同步更新两个状态变量
      this.isAdmin = userRole === 'Admin';
      this.value = this.isAdmin;
    })
    .catch(err => {
      console.error('获取角色失败:', err);
      // 请求失败默认隐藏元素
      this.value = false;
    });
}

3. 简化显示逻辑（可选） #

你可以直接把判断逻辑写在v-if里，省去额外的value变量，代码更简洁：

<NavLink v-if="isAdmin" :href="route('accounts')" :active="route().current('accounts')">
  Accounts
</NavLink>

4. 后端直接注入角色（优化方案） #

如果是Laravel+Vue这类后端渲染的项目，可以直接在页面渲染时把用户角色注入到全局，避免额外AJAX请求：
比如在Blade模板中：

<script>
window.currentUserRole = '{{ Auth::user()->role }}';
</script>

然后在Vue组件中直接使用：

mounted() {
  this.isAdmin = window.currentUserRole === 'Admin';
  this.value = this.isAdmin;
}

内容的提问来源于stack exchange，提问作者Mr_Vantes