Vue3+TypeScript中使用includes判断权限时类型错误的解决咨询

你的错误根源有两个：

• pages数组中role字段类型不统一：有的是number[]（比如Dashboard的[0,1]），有的是string（Login的'admin'），TypeScript自动推断role的类型为string | number[]，导致includes方法的参数类型被推断为never（字符串的includes接受string，数组的includes接受number，两者没有共同类型）。
• isAdmin是number | undefined类型，存在未定义的可能性，无法匹配includes的参数要求。

解决方案 #

1. 统一role字段类型

把所有role改成统一的number[]类型，根据业务逻辑调整权限数值：

const pages = [
  {
    name: 'Dashboard',
    icon: HomeIcon,
    to: '',
    role: [0,1]
  },
  {
    name: 'Quản lý người dùng',
    icon: MenuIcon,
    to: 'user',
    role: [1]
  },
  {
    name: 'Quản lý File',
    icon: FolderIcon ,
    to: 'files',
    role: [0,1]
  },
  {
    name: 'AWS 3 STORAGE',
    icon: FolderOpenIcon ,
    to: 'aws3',
    role: [1]
  },
  // 修改Login项的role为数值数组
  {
    name: 'Login',
    icon: CollectionIcon,
    to: 'login',
    role: [0,1] // 根据实际权限设置对应的数值
  },
  {
    name: 'Config',
    icon: AdjustmentsIcon,
    to: 'config',
    role: [1]
  }
]

2. 处理isAdmin的undefined问题

给isAdmin设置默认值，避免未定义状态：

// 初始化时设置默认值，比如默认非管理员（0）
const isAdmin = ref<number>(0)

// 从localStorage取值时做兜底处理
const checkUser = JSON.parse(localStorage.getItem('user')||'{"is_admin": 0}')
isAdmin.value = checkUser.is_admin ?? 0 // 空值合并运算符确保不会是undefined

3. （可选）给pages定义明确的类型

添加接口约束，让TypeScript提供更严格的类型检查：

import type { Component } from 'vue'

interface Page {
  name: string
  icon: Component
  to: string
  role: number[]
}

const pages: Page[] = [
  // 页面配置项
]

4. 模板中的判断逻辑

类型统一后，原模板的v-if即可正常运行：

<router-link 
  exact-active-class="bg-purple-400 text-white" 
  v-if="page.role.includes(isAdmin)"
  class="inline-flex items-center w-full text-sm font-semibold transition duration-200 ease-in hover:bg-purple-500 hover:text-white  py-2 px-2 rounded-lg "
  :to="`/${page.to}`">
  <component :is="page.icon" class="flex-shrink-0 h-6 w-6" aria-hidden="true" />
  <span class="ml-4">{{ page.name }}</span>            
</router-link>

内容的提问来源于stack exchange，提问作者Nguyễn Thế Hưng