Vue.jsで権限により表示可能画面の制御

<template>
  <div>
    <header class="header">
     <div class="headerNav">
      <nav>
　　　　 <!--ログイン画面の場合はメニューを表示しない -->
        <ul v-show="$route.path !== '/'" class="b">
           
          <!-- Vuexのロール情報を取得し、adminの場合のみユーザ一覧へのリンクを表示 -->
          <li v-show="store.getters.getRole=='admin'"><a href="#" @click.prevent.stop="trasPage('accountList')">ユーザ一覧</a></li>
          
          <!-- 商品一覧とログアウトは全てのユーザが閲覧可能 -->　
          <li><a href="#" @click.prevent.stop="trasPage('goodsList')">商品一覧</a></li>
          <li><a href="#" @click.prevent.stop="logout">ログアウト</a></li>
        </ul>
      </nav>
      </div>
    </header>
   
    <!--Vue Router用のタグ、URLに対応した画面を表示 -->
    <router-view/>
    
  </div>
</template>

<script>

import { useStore } from 'vuex'
import { useRouter  } from 'vue-router'
import accountRepository from './composables/AccountRepository'

export default ({
  name: 'App',
  setup(){
  
     const router = useRouter()
     const store = useStore()
     const { logoutAccount } = accountRepository()
     
     //メニューのリンクが押下された時に呼ばれる
     //router.pushメソッドで画面遷移依頼
     const trasPage = ( page ) => {
      if( page == "goodsList"){
        router.push("/goodsList")
      }else if( page == "accountList"){
        router.push("/accountList")
      }
    }

　　//ログアウト処理用のコールバック
    const callback = ()=>{
      router.push("/")
    }

    //ログアウト押下時の処理
    const logout = ()=>{
      logoutAccount( callback )
    }
  
    return{
      trasPage,
      store
    }
  }
})
</script>

<style>

.header{
  display: flex;
  width: 100%;
  height:90px;
  padding: 0%;
  justify-content: space-between;
  background-color:#ff69b4;
  maring: 0px 0%;
}

.b{
  display: flex;
  font-size: 18px;
  text-transform: uppercase;
  margin-top: 30px;
  margin-right: 30px;
  list-style: none;
}
.b li{
  margin-left: 30px;
}
.b li a{
  color: #0000ff;
  text-decoration: none;
}

.headerNav{
  display: flex;
  width: 100%;
  height:90px;
  padding: 0%;
  justify-content: space-between;
   maring:0%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

import { createRouter, createWebHistory } from 'vue-router'

//ログイン、ユーザ一覧、商品一覧、権限エラーの4つの画面
//の遷移を管理する
import Login from '../views/Login.vue'
import AccountList from '../views/AccountList.vue'
import GoodsList from '../views/GoodsList.vue'
import AuthorityError from '../views/AuthorityError.vue'

import store from '@/store/index';

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/accountList',
    name: 'accountList',
    component: AccountList
  },
  {
    path: '/goodsList',
    name: 'goodsList',
    component: GoodsList
  },
  {
    path: '/authorityError',
    name: 'authorityError',
    component: AuthorityError
  },
]

//historyモードでルーター作成
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

//画面遷移が行われる前に呼ばれるメソッド
//ここでURL直接入力された時などのために、権限チェックを行う
router.beforeEach((to, from, next) => {

 //パスがログインの場合はそのまま遷移
 if( to.path == "/"){
   next()
   return
 }
 
 //非ログイン状態の時はログイン画面へ遷移
 if( !store.getters.getIsLogin ){
   router.push("/")
 }else{
   //ログイン状態の時
　　//権限がguestでユーザ一覧画面へ遷移しようとしてる場合は権限エラー画面に遷移
    //それ以外の時はそのまま遷移
   var role = store.getters.getRole
   if( role == "guest" && ( to.path == "/accountList" ) ){
     router.push("/authorityError")
   }else{
     next()
   }
 }
})
export default router

<template>
　省略...
</template>
<script>

import { ref } from 'vue'
import { useRouter  } from 'vue-router'

export default ({
  name: 'App',
  setup(){
    const router = useRouter()
 
   router.beforeEach((to, from, next) => {
     //パスがログインの場合はそのまま遷移
     if( to.path == "/"){
       next()
       return
     }
 
     //非ログイン状態の時はログイン画面へ遷移
     if( !store.getters.getIsLogin ){
       router.push("/")
     }else{
       //ログイン状態の時
　　   //権限がguestでユーザ一覧画面へ遷移しようとしてる場合は権限エラー画面に遷移
       //それ以外の時はそのまま遷移
       var role = store.getters.getRole
       if( role == "guest" && ( to.path == "/accountList" ) ){
         router.push("/authorityError")
       }else{
         next()
       }
     }
   })
  }
})

<template>
  <div>
		<div class="inputItemDiv"><div style="color:red;">{{message}}</div></div>
		<div class="table" style="max-height:300px;width:900px;">
			<table>
				<thead>
					<tr>
						<th>コード</th>
						<th>名前</th>
						<th>カテゴリ</th>
						<th>価格</th>
					</tr>
				</thead>
				<tbody>
					<tr  v-for="(data) in goodsList" :key="data.id">
						<td>{{ data.code }}</td>
						<td>{{ data.name }}</td>
						<td>{{ data.category }}</td>
						<td>{{ data.price }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		
	</div>

</template>

<script>
import { ref } from 'vue'
import goodsRepository from '../composables/GoodsRepository'

export default ({
  name: 'GoodsList',
  setup(){
    //商品情報リスト
    const goodsList = ref([])

    //商品取得結果メッセージ
    const message = ref(null)

    //goodsRepositoryモジュールからgetGoodsメソッドを取得
    const { getGoods } = goodsRepository()
    
    //データ取得時のコールバック( GoodsRepositoryのgetGoodsメソッドに渡す)
    const callback = ( result, data )=>{
      //取得成功の場合はgoodsListに取得データを設定
      if( result == "success"){
        message.value = "データ取得完了"
        goodsList.value = data
      }else{
        message.value = result
      }
    }
    
    //ユーザ情報取得
    getGoods( callback )
    
    return{
      goodsList,
      message
    }  
  }
})

</script>

import store from '@/store/index';
import * as axios from 'axios'

export default function (){

  //商品情報取得
  const getGoods = async( callback ) => {
    try{
      //Spring Bootにaxiosで商品取得依頼
      var token = store.getters.getAuthToken
      console.log( token )
      var goodsList = await requestServerGetWidthToken ( "api/goods/list", token)

      //コールバックに結果を返す
      callback( "success", goodsList )
    }catch(e){
      callback(e)
    }
  }

  //axiosのGetメソッドでトークンをヘッダーにセットしSpring Boot側へリクエストを掛ける
  const requestServerGetWidthToken = ( url, token ) =>{
    return new Promise((resolve, reject) => {
      axios
        .get('http://localhost:8080/' + url
          ,{
              headers: {
                "X-AUTH-TOKEN" : token
              }
          } 
         )
        .then(response => {
           resolve(response.data)
         }).catch(error => {
            reject(error)
         })
    }).catch((e) => {
      throw e
    })
  }

  return{
    getGoods
  }
}	

<template>
	<div class="contentMainDiv">
		<div style="color:red;">このページにアクセスする権限がありません</div>	
	</div>
</template>

  const logoutAccount  = async( callback ) => {
    try{ 
      //サーバにログアウト依頼
      await requestServerPost("logout")
      
      //ログイン、権限、トークン情報を初期化
      store.commit("setIsLogin", false)
      store.commit("setRole", "")
      store.commit("setAuthToken", "")
      
      callback("success")
    }catch(e){
      callback(e)
    }
  }

  return{
    loginAccount,
    getAccount,
    logoutAccount
  }

package com.example.authsample.ac;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.example.authsample.entity.Account;
import com.example.authsample.repository.AccountRepository;
import reactor.core.publisher.Flux;

@RestController
@RequestMapping("/api/account")
@CrossOrigin
public class AccountController {

	@Autowired
	private AccountRepository accountRepository;

	/**
	* ユーザリストを取得
	* @return
	*/
	@RequestMapping(value = "/list", method = RequestMethod.GET)
	public Flux<Account> getUserList() throws Exception{

		//権限がadmin以外からの受付を拒否する処理
		//セッションから権限情報を取得
		String role = ( String )SecurityContextHolder.getContext().getAuthentication().getAuthorities().iterator().next().getAuthority();
		//ダブルクォート削除処理
		role = role.replaceAll("\"", "");

    //	権限がadminでない場合は例外を発生
		if( !role.equals("admin")) {
			throw new RoleAuthorityException("アクセス権限がありません。");
		}
		return this.accountRepository.findAll();
	}
}

package com.example.authsample.ac;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.example.authsample.entity.Goods;
import com.example.authsample.repository.GoodsRepository;

import reactor.core.publisher.Flux;


@RestController
@RequestMapping("/api/goods")
@CrossOrigin
public class GoodsController {


	@Autowired
	private GoodsRepository goodsRepository;

	/**
	* 商品リストを取得
	* @return
	*/
	@RequestMapping(value = "/list", method = RequestMethod.GET)
	public Flux<Goods> getUserList() throws Exception{

		return this.goodsRepository.findAll();

	}
}

package com.example.authsample.repository;

import org.springframework.data.repository.reactive.ReactiveCrudRepository;
import com.example.authsample.entity.Goods;

public interface GoodsRepository extends ReactiveCrudRepository<Goods, Integer> {
}

package com.example.authsample.entity;

import java.math.BigDecimal;
import org.springframework.data.annotation.Id;
import org.springframework.data.relational.core.mapping.Table;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

@Getter
@Setter
@Data
@NoArgsConstructor
@AllArgsConstructor
@Table("goods")
public class Goods {
	@Id
	private Long id;
	private String code;
	private String name;
	private String category;
	private BigDecimal price;
}