时间戳

首页 > 解决方案 > Nuxt.js 基于角色的服务器渲染

vue.js - Nuxt.js 基于角色的服务器渲染

问题描述

我的数据库中有两个角色。第一个是管理员，第二个是普通用户。我有一个页面向管理员和普通用户显示用户表。但是，对于管理员，我想显示一个使用电子邮件和密码创建新用户的按钮。我不想向普通用户显示此按钮。我希望它在服务器上完成，我不想将 isAdmin 参数设置为 vuex 状态。因为如果我将它设置为 vuex 状态，那么我可以使用 vue devtools 轻松更改数据......有没有条件渲染的解决方案。不像这样：

<template>   <div>
     <b-table striped hover :items="getUserList"></b-table>
     <b-button v-if="isAdmin" variant="primary" size="lg" to="/add_user">+</b-button>   </div> </template>

<script> import { mapActions, mapGetters } from "vuex"; import axios from "axios";

export default {   middleware: 'authorize-user',   methods: {
    async getUserList() {
      try {
        let res = await axios.post("/api/users");
        if (res && res.data) {
          return res.data.users ? res.data.users : [];
        }
      } catch (e) {
        console.log("user fetch failed");
      }
    }   },   computed: {
    ...mapGetters(['isAdmin'])   } } </script>

标签： vue.jsserver-side-renderingnuxt.js

解决方案

客户端上的任何 js 代码都可以更改和访问。所以你的担心是无效的。您始终应该检查服务器上的权限。因此，在这种情况下，即使他们更改客户端上的 isAdmin 并显示按钮 - 它仍然不会在点击时执行任何操作。

推荐阅读