基于Session Storage的用户报表权限控制及userType格式问题解决

一、基于Session Storage实现用户专属报表过滤 #

1. 存储用户类型到Session Storage
   在用户登录流程完成后，将用户类型存入Session Storage：

// 登录成功后执行，根据实际用户类型赋值
sessionStorage.setItem('userType', 'HAuser'); 

2. 在组件中过滤报表数据
   修改Listing.vue，通过计算属性过滤数据，只保留当前用户有权限查看的报表：

<template>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Format</th>
        <th scope="col">User Type</th>
      </tr>
    </thead>
    <tbody>
      <!-- 遍历过滤后的报表数据 -->
      <tr v-for="report in filteredReports" :key="report.id">
        <td scope="row">{{ report.id }}</td>
        <td>{{ report.name }}</td>
        <td>{{ report.format }}</td>
        <td>{{ report.userType.join(', ') }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data(){
    return{
      reports: []
    }
  },
  computed: {
    filteredReports() {
      const currentUserType = sessionStorage.getItem('userType');
      // 筛选出userType数组包含当前用户类型的报表
      return this.reports.filter(report => report.userType.includes(currentUserType));
    }
  },
  mounted() {
    fetch('http://localhost:3002/reports')
      .then(res => res.json())
      .then(data => this.reports = data)
      .catch(err => console.log(err.message))
  },
}
</script>

二、去除userType显示的[]和引号 #

由于userType是数组类型，直接插值会显示数组默认的字符串格式（带括号和引号），使用数组的join()方法将元素转为逗号分隔的字符串即可解决：

<!-- 原代码 -->
<td>{{ report.userType }}</td>
<!-- 修改后 -->
<td>{{ report.userType.join(', ') }}</td>

修改后会将["HAuser", "Supplier"]显示为HAuser, Supplier，彻底去除括号和引号。

内容的提问来源于stack exchange，提问作者ka hei tong