# 目次
1. はじめに
2. プロジェクトのセットアップ
   2.1 環境の準備
   2.2 必要な依存関係の追加
3. Spring Bootでのバックエンド構築
   3.1 Spring Securityの設定
   3.2 ユーザー認証の実装
   3.3 Roleによる権限管理
4. Reactでのフロントエンド構築
   4.1 Reactプロジェクトのセットアップ
   4.2 認証フローの実装
   4.3 コンポーネントの制限
5. API通信の実装
   5.1 Axiosの設定
   5.2 認証付きAPIリクエスト
6. デプロイと環境変数
   6.1 Herokuへのデプロイ
   6.2 環境変数の管理
7. まとめ

# 1. はじめに
アプリケーションにおける認可機能の実装は、特定権限のユーザーのみがアクセスできる機能やページを制限する上で重要です。本記事では、Spring BootとReactを用いて、AdminおよびUserの権限を持つユーザーの認可機能をシンプルに実装する方法を紹介します。

# 2. プロジェクトのセットアップ

## 2.1 環境の準備
まずは、Spring BootのプロジェクトとReactのプロジェクトをそれぞれ作成します。

### Spring Boot
Spring Initializrを使用して、新しいSpring Bootプロジェクトを生成します。必要な依存関係として「Spring Web」「Spring Security」「Spring Data JPA」を選択します。

### React
Create React Appを使用して、Reactの開発環境を構築します。

![img](/mosaic-code.jpg)

## 2.2 必要な依存関係の追加
追加で以下の依存関係を導入しておきます。

### Spring Boot
![img](/mosaic-code.jpg)

### React
![img](/mosaic-code.jpg)

# 3. Spring Bootでのバックエンド構築

## 3.1 Spring Securityの設定
Spring Securityを用いて、認証や認可の基盤を構築します。

![img](/mosaic-code.jpg)

## 3.2 ユーザー認証の実装
`UserDetailsService`を実装し、ユーザー情報と権限をロードします。

![img](/mosaic-code.jpg)

## 3.3 Roleによる権限管理
ユーザーごとに役割(Role)を割り当てます。これにより、特定のAPIエンドポイントや機能に対するアクセスを制御できます。

# 4. Reactでのフロントエンド構築

## 4.1 Reactプロジェクトのセットアップ
Reactプロジェクトを構成し、必要なルーティングを設定します。

![img](/mosaic-code.jpg)

## 4.2 認証フローの実装
未認証のユーザーをログイン画面にリダイレクトさせます。

## 4.3 コンポーネントの制限
ユーザーの権限に応じて、表示するコンポーネントを変えます。

![img](/mosaic-code.jpg)

# 5. API通信の実装

## 5.1 Axiosの設定
Axiosを用いて、Spring BootのAPIエンドポイントに接続します。

![img](/mosaic-code.jpg)

## 5.2 認証付きAPIリクエスト
JWTトークンなどを使用して認証情報を付与し、サーバーにリクエストを送ります。

![img](/mosaic-code.jpg)

# 6. デプロイと環境変数

## 6.1 Herokuへのデプロイ
HerokuへSpring BootとReactのアプリをデプロイします。

![img](/mosaic-code.jpg)

## 6.2 環境変数の管理
環境変数はHerokuの設定から管理します。

# 7. まとめ
この記事では、Spring BootとReactを使用した基本的な認可機能の構築方法について解説しました。Spring Securityを利用することで、役割ごとにAPIのアクセス制限を簡単に行えます。Reactではコンポーネントベースで制御することで、ユーザーの権限に応じた表示を実現しました。今後、もっと高度な機能を取り入れ、拡張していくことをお勧めします。 [cv:issue_marketplace_engineer]

# 目次
1. はじめに
2. プロジェクトのセットアップ
   2.1 環境の準備
   2.2 必要な依存関係の追加
3. Spring Bootでのバックエンド構築
   3.1 Spring Securityの設定
   3.2 ユーザー認証の実装
   3.3 Roleによる権限管理
4. Reactでのフロントエンド構築
   4.1 Reactプロジェクトのセットアップ
   4.2 認証フローの実装
   4.3 コンポーネントの制限
5. API通信の実装
   5.1 Axiosの設定
   5.2 認証付きAPIリクエスト
6. デプロイと環境変数
   6.1 Herokuへのデプロイ
   6.2 環境変数の管理
7. まとめ

# 1. はじめに
アプリケーションにおける認可機能の実装は、特定権限のユーザーのみがアクセスできる機能やページを制限する上で重要です。本記事では、Spring BootとReactを用いて、AdminおよびUserの権限を持つユーザーの認可機能をシンプルに実装する方法を紹介します。

# 2. プロジェクトのセットアップ

## 2.1 環境の準備
まずは、Spring BootのプロジェクトとReactのプロジェクトをそれぞれ作成します。

### Spring Boot
Spring Initializrを使用して、新しいSpring Bootプロジェクトを生成します。必要な依存関係として「Spring Web」「Spring Security」「Spring Data JPA」を選択します。

### React
Create React Appを使用して、Reactの開発環境を構築します。

```bash
npx create-react-app react-auth-app
cd react-auth-app
```

## 2.2 必要な依存関係の追加
追加で以下の依存関係を導入しておきます。

### Spring Boot
```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>org.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
</dependency>
```

### React
```bash
npm install axios react-router-dom
```

# 3. Spring Bootでのバックエンド構築

## 3.1 Spring Securityの設定
Spring Securityを用いて、認証や認可の基盤を構築します。

```java
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/admin/**").hasRole("ADMIN")
            .antMatchers("/user/**").hasAnyRole("ADMIN", "USER")
            .anyRequest().authenticated()
            .and()
            .formLogin().permitAll()
            .and()
            .logout().permitAll();
    }
}
```

## 3.2 ユーザー認証の実装
`UserDetailsService`を実装し、ユーザー情報と権限をロードします。

```java
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;

@Service
public class CustomUserDetailsService implements UserDetailsService {

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        // ユーザー情報をデータベースから取得
        // ここでは簡略化のためにハードコーディングしていますが、通常はリポジトリを使います。
        if ("admin".equals(username)) {
            return org.springframework.security.core.userdetails.User
                    .withUsername("admin")
                    .password("{noop}adminpass")
                    .roles("ADMIN")
                    .build();
        } else {
            return org.springframework.security.core.userdetails.User
                    .withUsername("user")
                    .password("{noop}userpass")
                    .roles("USER")
                    .build();
        }
    }
}
```

## 3.3 Roleによる権限管理
ユーザーごとに役割(Role)を割り当てます。これにより、特定のAPIエンドポイントや機能に対するアクセスを制御できます。

# 4. Reactでのフロントエンド構築

## 4.1 Reactプロジェクトのセットアップ
Reactプロジェクトを構成し、必要なルーティングを設定します。

```javascript
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AdminPage from './components/AdminPage';
import UserPage from './components/UserPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin" component={AdminPage} />
        <Route path="/user" component={UserPage} />
      </Switch>
    </Router>
  );
}

export default App;
```

## 4.2 認証フローの実装
未認証のユーザーをログイン画面にリダイレクトさせます。

## 4.3 コンポーネントの制限
ユーザーの権限に応じて、表示するコンポーネントを変えます。

```javascript
import React from 'react';

const ProtectedComponent = ({ role, allowedRoles }) => {
  return (allowedRoles.includes(role)) ? (
    <div>Access Granted</div>
  ) : (
    <div>Access Denied</div>
  );
};
```

# 5. API通信の実装

## 5.1 Axiosの設定
Axiosを用いて、Spring BootのAPIエンドポイントに接続します。

```javascript
import axios from 'axios';

const API = axios.create({
  baseURL: 'http://localhost:8080/api',
  headers: {
    'Content-Type': 'application/json'
  }
});

export default API;
```

## 5.2 認証付きAPIリクエスト
JWTトークンなどを使用して認証情報を付与し、サーバーにリクエストを送ります。

```javascript
API.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
```

# 6. デプロイと環境変数

## 6.1 Herokuへのデプロイ
HerokuへSpring BootとReactのアプリをデプロイします。

```bash
git push heroku main
```

## 6.2 環境変数の管理
環境変数はHerokuの設定から管理します。

# 7. まとめ
この記事では、Spring BootとReactを使用した基本的な認可機能の構築方法について解説しました。Spring Securityを利用することで、役割ごとにAPIのアクセス制限を簡単に行えます。Reactではコンポーネントベースで制御することで、ユーザーの権限に応じた表示を実現しました。今後、もっと高度な機能を取り入れ、拡張していくことをお勧めします。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

目次

続きを読むには単価診断を受けてください（30秒）