Vue页面权限划分

• 获取用户角色：

在created钩子中，你从本地存储中获取了用户的认证信息，并从中解析出用户角色，并将其存储在userRole变量中。

data() {
        return {
            // 用户角色
            userRole: null,
        };
    },
...........
...........
created() {
    // 获取用户角色
    const authToken = JSON.parse(localStorage.getItem("authToken"));
    this.userRole = authToken.role;
}

• 根据用户角色展示不同内容：

在模板中，使用v-if指令根据用户角色的不同来展示不同的内容。对于普通用户和管理员用户，分别使用了两个div块来展示不同的界面内容。

<!-- 普通用户界面 -->
<div v-if="userRole === '普通用户'">
    <!-- 普通用户界面内容 -->
</div>

<!-- 管理员界面 -->
<div v-if="userRole === '管理员'">
    <!-- 管理员界面内容 -->
</div>

通过以上方式，根据用户角色的不同，在页面上展示了不同的界面内容，从而实现了页面针对不同用户的区分展示。