[Spring] 글쓰기 제한하기 관리자만 글 등록 가능하게 하기

 

FaqQuestion.vue

관리자만 글 작성 가능하도록 수정함.

<template>
  <div style="width: 1000px; margin: 0 auto;">
    <table class="table table-hover">
      <thead>
        <tr>
          <th style="width: 10%;">번호</th>
          <th style="width: 40%;">제목</th>
          <th style="width: 20%;">글쓴이</th>
          <th style="width: 30%;">날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(question, index) in questions" :key="question.id" @click="goToDetail(question.id)">
          <td>{{ index + 1 + (currentPage * pageSize) }}</td>
          <td>{{ question.title }}</td>
          <td>{{ question.writer }}</td>
          <td>{{ question.date }}</td>
        </tr>
      </tbody>
    </table>
    <div class="d-flex justify-content-between align-items-center my-4">
      <div>
        <button @click="previousPage" :disabled="currentPage === 0" class="btn btn-outline-primary mr-3">
          <i class="bi bi-chevron-left"></i> Page {{ currentPage + 1 }}
        </button>
      </div>
      <div>
        <button @click="nextPage" :disabled="!hasMore" class="btn btn-outline-primary ml-3">
          Page {{ currentPage + 2 }} <i class="bi bi-chevron-right"></i>
        </button>
      </div>
      <div>
        <button v-if="isAdmin" class="btn btn-primary" @click="faqwrite">등록</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      questions: [],
      currentPage: 0,
      pageSize: 10,
      hasMore: true,
      dept: null,
      isAdmin: false,
    };
  },
  mounted() {
    axios.post("/api/getMemberType", { withCredentials: true }).then((res) => {
      this.dept = res.data.dept;
      this.isAdmin = this.dept === '관리자';
    }).catch(() => {
      this.dept = null;
    });

    this.fetchQuestions();
  },
  methods: {
    fetchQuestions() {
      axios.get(`http://localhost:3000/api/faqquestions/paged?page=${this.currentPage}&size=${this.pageSize}`)
        .then(response => {
          this.questions = response.data.map(question => ({
            ...question,
            date: new Date(question.date).toLocaleDateString('ko-KR', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit'
            })
          }));
          this.hasMore = response.data.length === this.pageSize;
        })
        .catch(error => {
          console.error('Error fetching questions:', error);
        });
    },
    goToDetail(questionId) {
      this.$router.push(`/faq/${questionId}`);
    },
    nextPage() {
      if (this.hasMore) {
        this.currentPage++;
        this.fetchQuestions();
      }
    },
    previousPage() {
      if (this.currentPage > 0) {
        this.currentPage--;
        this.fetchQuestions();
      }
    },
    faqwrite() {
      if (!this.isAdmin) {
        alert('관리자만 접근 가능');
      } else {
        this.$router.push('/faqwrite');
      }
    }
  }
};
</script>

router

라우터에서도 주소 직접 들어가는 거 막아줌 .

    {path:"/faqwrite", name:"/faqwrite", component:()=> import("@/views/faqFolder/FaqWrite.vue"), meta: {layout : MainLayout},
    beforeEnter: (to,from,next) =>{
      if(store.state.account.id!=null){
        next()
      }else{
        next('/')
      }
    }},

 

faq 게시판 버튼 : 끝 페이지에서 비활성화.

<template>
  <div style="width: 1000px; margin: 0 auto;">
    <table class="table table-hover ">
      <thead>
        <tr class="table-title text-center">
          <th style="width: 10%; color:white;">번호</th>
          <th style="width: 60%; color:white;">제목</th>
          <th style="width: 10%; color:white;">글쓴이</th>
          <th style="width: 20%; color:white;">날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(question, index) in questions" :key="question.id" @click="goToDetail(question.id)">
          <td class="text-center">{{ index + 1 + (currentPage * pageSize) }}</td>
          <td>{{ question.title }}</td>
          <td>{{ question.writer }}</td>
          <td>{{ question.date }}</td>
        </tr>
      </tbody>
    </table>
    <div class="d-flex justify-content-between align-items-center my-4">
      <div>
        <button @click="previousPage" :disabled="currentPage === 0" class="btn btn-outline-primary mr-3">
          <i class="bi bi-chevron-left"></i> Page {{ currentPage + 1 }}
        </button>
      </div>
      <div>
        <button v-if="isAdmin" class="btn btn-primary" @click="faqwrite">등록</button>
      </div>
      <div>
        <button @click="nextPage" :disabled="!hasMore" class="btn btn-outline-primary ml-3">
          Page {{ currentPage + 2 }} <i class="bi bi-chevron-right"></i>
        </button>
      </div>

    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      questions: [],
      currentPage: 0,
      pageSize: 10,
      hasMore: true,
      dept: null,
      isAdmin: false,
    };
  },
  mounted() {
    axios.post("/api/getMemberType", { withCredentials: true }).then((res) => {
      this.dept = res.data.dept;
      this.isAdmin = this.dept === '관리자';
    }).catch(() => {
      this.dept = null;
    });

    this.fetchQuestions();
  },
  methods: {
    fetchQuestions() {
      axios.get(`http://localhost:3000/api/faqquestions/paged?page=${this.currentPage}&size=${this.pageSize}`)
        .then(response => {
          this.questions = response.data.map(question => ({
            ...question,
            date: new Date(question.date).toLocaleDateString('ko-KR', {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit'
            })

          })).reverse(); // 데이터를 역순으로 정렬합니다.
          this.hasMore = response.data.length === this.pageSize;
        })
        .catch(error => {
          console.error('Error fetching questions:', error);
        });
    },
    goToDetail(questionId) {
      this.$router.push(`/faq/${questionId}`);
    },
    nextPage() {
      if (this.hasMore) {
        this.currentPage++;
        this.fetchQuestions();
      }
    },
    previousPage() {
      if (this.currentPage > 0) {
        this.currentPage--;
        this.fetchQuestions();
      }
    },
    faqwrite() {
      if (!this.isAdmin) {
        alert('관리자만 접근 가능');
      } else {
        this.$router.push('/faqwrite');
      }
    }
  }
};
</script>

<style scoped>
.table-title{
  background-color: steelblue;
}

</style>