定义了一个名为 getUserRole 的 JavaScript 函数，该函数接受一个参数 authorityId，根据这个参数的不同值返回相应的用户角色字符串。这段代码的目的是根据传入的 authorityId 值判断用户的角色，然后返回相应的角色名称。
- 如果 authorityId 的值等于 888，函数返回字符串 ‘超级管理员’。
- 如果 authorityId 的值等于2，函数返回字符串 ‘游客’。
- 如果 authorityId 的值等于 1000，函数返回字符串 ‘abc’。
- 如果 authorityId 的值等于 1200，函数返回字符串 ‘测试人员’。
- 如果 authorityId 的值等于 2000，函数返回字符串 ‘开发人员’。
- 如果 authorityId 的值等于 3001，函数返回字符串 ‘def’。
- 如果 authorityId 的值不属于上述任何一个特定的值，函数返回字符串 ‘其他角色’。
function getUserRole(authorityId) {
if (authorityId === 888) {
return '超级管理员';
} else if (authorityId === 2) {
return '游客';
} else if (authorityId === 1000) {
return 'abc';
} else if (authorityId === 1200) {
return '测试人员';
} else if (authorityId === 2000) {
return '开发人员';
} else if (authorityId === 3001) {
return 'def';
} else {
return '其他角色';
}
}
定义了一个名为 authority_message 的 JavaScript 箭头函数。该函数使用 Element UI 框架中的 ElMessage 组件显示一个警告消息，提示用户当前用户的权限不够。
const authority_message = () => {
ElMessage({
type: 'warning',
message: '当前用户的权限不够'
});
};
上面这个 ElMessage是已经封装好的，是git-vue-admin框架自带的东西。
<div style="display: block;">
<el-link v-if="![888,1000,1200,2000,3000,3001].includes(userStore.userInfo.authorityId)" class="link" type="primary" @click="authority_message">
<h1>账号管理</h1>
</el-link>
<el-link v-else class="link" type="primary" @click="toTarget('person')">
<h1>账号管理</h1></el-link>
</div>
上面这个userStore.userInfo.authorityId能够拿到对应当前权限人员的号码，如果是超级管理员，拿到的就是888。
console.log('111aqd',userStore.userInfo.authorityId);
可以通过上面这个看是否在控制台打印出有对应的号码。
v-if的逻辑是，如果拿到的数字不是在[888,1000,1200,2000,3000,3001]当中的话，就提示说该用户没有权限。
v-else的逻辑是，如果不满足v-if的条件，就跳转界面。
出现的问题：为什么底下的这些框框看起来高矮不一？并且当切换为超级管理员与测试人员的时候，底下的框框长度也不一样？
