[React]~Admin画面5:ログイン認証とログアウトの実装 ~

こんにちは、KOUKIです。Reactで画面開発を行なっています。

前回は、ログイン処理を実装しました。

今回は、ログイン認証とログアウトを実装します。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

[React/NextJS]~画面開発まとめ~

前回

[React]~Admin画面4:ログイン処理の実装 ~

事前準備

フォルダ/ファイル

touch react-admin/src/components/Layout.tsx

1	touch react-admin/src/components/Layout.tsx

コンポーネントとProps

Reactには、UIを部品として独立させ、再利用性を向上させるコンポーネントと呼ばれる概念があります。

DashboardのナビゲーションやMenuなどをUserページから切り離して、コンポーネント化しましょう。

// components/Layout.tsx
import Nav from '../components/Nav'
import Menu from '../components/Menu'

const Layout = (props: any) => {
	return (
		<div>
			<Nav />
			<div className="container-fluid">
				<div className="row">
					<Menu />

					<main className="col-md-9 ms-sm-auto col-lg-10 px-md-4">
						<div className="table-responsive">
							{props.children}
						</div>
					</main>
				</div>
			</div>
		</div>
	)
}

export default Layout

// components/Layout.tsx

import Nav from '../components/Nav'

import Menu from '../components/Menu'

const Layout = (props: any) => {

return (

<div>

<Nav />

{props.children}

</div>

</main>

</div>

)

}

export default Layout

コンポーネントを作る方法は、2つあります。関数コンポーネントとクラスコンポーネントです。

上記は、関数コンポーネントで実装しました。

Layoutの引数(props: any)には、Props(プロパティの意味)を指定しています。こうすると、Layoutで括ったHTML要素をこのpropsに渡すことができます。

// pages/Users.tsx
import Layout from '../components/Layout'

const Users = () => {
	return (
		<Layout>
			<table className="table table-striped table-sm">
				<thead>
					<tr>
						<th scope="col">#</th>
						<th scope="col">Header</th>
						<th scope="col">Header</th>
						<th scope="col">Header</th>
						<th scope="col">Header</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1,001</td>
						<td>random</td>
						<td>data</td>
						<td>placeholder</td>
						<td>text</td>
					</tr>
				</tbody>
			</table>
		</Layout>
	)
}

export default Users

// pages/Users.tsx

import Layout from '../components/Layout'

const Users = () => {

return (

<thead>

<tr>

<th scope="col">Header</th>

</tr>

</thead>

<tbody>

<tr>

<td>random</td>

<td>placeholder</td>

</tr>

</tbody>

</table>

</Layout>

)

}

export default Users

上記では、Propsとしてtable要素を渡しています。それを、Layoutコンポーネント側で「{props.children}」を指定して取り出しています。

docker-compose upでコンテナを起動して、「http://localhost:3000」にアクセスしてみましょう。

コンポーネント化した後でも、Dashboardが表示されていたら成功です。

ログイン認証機能

前回、ログイン機能を実装しました。その時は触れなかったのですが、ログインが成功するとブラウザ上にCookie情報が登録されます。

この情報は、ユーザーがログインの有無を確認する認証機能として利用できます。

ログイン済みかチェックする

先ほど実装したLayout関数に、ログイン認証機能を実装してみましょう。

// components/Layout.tsx
import { useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom'
import Nav from '../components/Menu'
import Menu from '../components/Menu'
import axios from 'axios'

const Layout = (props: any) => {
	// baseURLはindex.tsxに設定してある
	const userURL = 'user'
	const [redirect, setRedirect] = useState(false)

	// useEffect
	// https://ja.reactjs.org/docs/hooks-reference.html#useeffect
	// Reactアプリの状態の変更を検知して、実行
	useEffect(() => {
		(
			async () => {
				try {
					// ユーザー情報の取得
					const { data } = await axios.get(userURL)
					console.log({data})
				} catch(e) {
					// 認証情報が取得できない == ログインしていない
					setRedirect(true)
				}
			}
		)()
	}, [])

	if (redirect) {
		// ログイン画面へリダイレクト
		return <Redirect to={'/login'} />
	}

	return (
	...
}

export default Layout

// components/Layout.tsx

import { useEffect, useState } from 'react'

import { Redirect } from 'react-router-dom'

import Nav from '../components/Menu'

import Menu from '../components/Menu'

import axios from 'axios'

const Layout = (props: any) => {

// baseURLはindex.tsxに設定してある

const userURL = 'user'

const [redirect, setRedirect] = useState(false)

// useEffect

// https://ja.reactjs.org/docs/hooks-reference.html#useeffect

// Reactアプリの状態の変更を検知して、実行

useEffect(() => {

(

async () => {

try {

// ユーザー情報の取得

const { data } = await axios.get(userURL)

console.log({data})

} catch(e) {

// 認証情報が取得できない == ログインしていない

setRedirect(true)

}

)()

}, [])

if (redirect) {

// ログイン画面へリダイレクト

return <Redirect to={'/login'} />

}

return (

...

}

export default Layout

useEffectを使って、ページの表示後にAPI側へユーザー情報を取得する処理を実装しました。

前回、index.tsxに「axios.defaults.withCredentials = true」を設定したので、axios通信にはCookie情報を必須としました。

もし情報の取得に失敗した場合、未認証扱いとしてログイン画面にリダイレクトします。

Cookieは、ブラウザから「右クリック->Deleteボタン」で消すことができるので、削除後に「http://localhost:3000/」にアクセスして、ログイン画面に戻るか確認してください。

ログアウト

ユーザー認証ができたので、今度はログアウト処理を実装しましょう。

これが実装できれば、わざわざブラウザからCookieを手動で削除しなくて済みますからね^^

Propsインターフェースの定義

ログアウトは、Navコンポーネントに追加します。

その際に、親ページのLayoutからユーザー情報をPropsとして渡す必要があります。

本アプリではTypeScriptを使用しており、Propsの型が必要になるので、models/user.tsに実装しましょう。

// models/user.ts

export class User {
...
}

export interface UserProps {
	id: number
	first_name: string
	last_name: string
	email: string
}

// models/user.ts

export class User {

...

}

export interface UserProps {

id: number

first_name: string

last_name: string

email: string

}

この型は、Navコンポーネントにパラメータとして指定します。

// src/components/Nav.tsx
import { UserType as User} from '../models/user'

// propsを追加
const Nav = (props: { user: User }) => {
....
}

// src/components/Nav.tsx

import { UserType as User} from '../models/user'

// propsを追加

const Nav = (props: { user: User }) => {

....

}

続いて、Layout.tsxからユーザー情報をNavコンポーネントに渡します。

// components/Layout.tsx
...

const Layout = (props: any) => {
	const userURL = 'user'
	const [redirect, setRedirect] = useState(false)
	// User情報のState
	const [user, setUser] = useState<UserProps | null>(null)

	useEffect(() => {
		(
			async () => {
				try {
					const { data } = await axios.get(userURL)
					// User情報をセット
					setUser(data)
				} catch(e) {
					setRedirect(true)
				}
			}
		)()
	}, [])

	if (redirect) {...}

	return (
		<div>
			<Nav user={user}/> // user情報を渡す
			...
		</div>
	)
}

// components/Layout.tsx

...

const Layout = (props: any) => {

const userURL = 'user'

const [redirect, setRedirect] = useState(false)

// User情報のState

const [user, setUser] = useState<UserProps | null>(null)

useEffect(() => {

(

async () => {

try {

const { data } = await axios.get(userURL)

// User情報をセット

setUser(data)

} catch(e) {

setRedirect(true)

}

)()

}, [])

if (redirect) {...}

return (

<div>

<Nav user={user}/> // user情報を渡す

...

</div>

)

}

追加した処理は、以下です。

useStateを使って、Reactアプリにユーザー情報を状態として持たせる
axiosのPOSTリクエスト後に、ユーザー情報をセットする
Navコンポーネントに、ユーザー情報をPropsとして渡す

ルーティング処理

次に、Nav.tsxのreturnの中身を書きます。

// src/components/Nav.tsx
import { Link } from 'react-router-dom'
import { UserProps } from '../models/user'

// propsを追加
const Nav = (props: { user: UserProps | null }) => {
  const logout = () => {

  }

	return (
    <header className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
      <a className="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
      <div className="navbar-nav">
        <div className="nav-item text-nowrap">
          <Link
            to={'/profile'}
            className="nav-link px-3"
          >
            {props.user?.first_name} {props.user?.last_name}
          </Link>
          <Link
            to={'/login'}
            className="nav-link px-3"
            onClick={logout}
          >
            Sign out
          </Link>
        </div>
      </div>
    </header>
	)
}

export default Nav

// src/components/Nav.tsx

import { Link } from 'react-router-dom'

import { UserProps } from '../models/user'

// propsを追加

const Nav = (props: { user: UserProps | null }) => {

const logout = () => {

}

return (

<a className="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>

<Link

to={'/profile'}

className="nav-link px-3"

{props.user?.first_name} {props.user?.last_name}

</Link>

<Link

to={'/login'}

className="nav-link px-3"

onClick={logout}

Sign out

</Link>

</div>

</header>

)

}

export default Nav

ここでは、ReactのLinkを使って、ルーティング処理を実装しました。

ログアウトの実装

最後に、ログアウトを実装します。

// src/components/Nav.tsx
import axios from 'axios'

// propsを追加
const Nav = (props: { user: UserProps | null }) => {
  const logout = async () => { await axios.post('logout') }
}

// src/components/Nav.tsx

import axios from 'axios'

// propsを追加

const Nav = (props: { user: UserProps | null }) => {

const logout = async () => { await axios.post('logout') }

}

index.tsxに、ベースとなるURLを設定しているので、’logout’を指定するだけで、API側へリクエストを送信できます。

// src/index.tsx
axios.defaults.baseURL = 'http://localhost:8000/api/admin/

1 2	// src/index.tsx axios.defaults.baseURL = 'http://localhost:8000/api/admin/

検証

検証してみましょう。

次回

次回は、ユーザー一覧の実装をしましょう。

[React]~Admin画面6:ユーザー一覧の実装~

Reactまとめ

[React/NextJS]~画面開発まとめ~

React~記事まとめ~

参考書籍

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

React.js＆Next.js超入門第2版【電子書籍】[ 掌田津耶乃 ]
価格：2970円 (2021/6/26時点)

楽天で購入

ソースコード

ここまで実装したソースコードを下記に記載します。

Layout.tsx

// components/Layout.tsx
import { useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom'
import { UserProps } from '../models/user'
import Nav from '../components/Nav'
import Menu from '../components/Menu'
import axios from 'axios'

const Layout = (props: any) => {
	const userURL = 'user'
	const [redirect, setRedirect] = useState(false)
	// User情報のState
	const [user, setUser] = useState<UserProps | null>(null)

	useEffect(() => {
		(
			async () => {
				try {
					const { data } = await axios.get(userURL)
					// User情報をセット
					setUser(data)
				} catch(e) {
					setRedirect(true)
				}
			}
		)()
	}, [])

	if (redirect) {
		// ログイン画面へリダイレクト
		return <Redirect to={'/login'} />
	}

	return (
		<div>
			<Nav user={user}/>
			<div className="container-fluid">
				<div className="row">
					<Menu />

					<main className="col-md-9 ms-sm-auto col-lg-10 px-md-4">
						<div className="table-responsive">
							{props.children}
						</div>
					</main>
				</div>
			</div>
		</div>
	)
}

export default Layout

// components/Layout.tsx

import { useEffect, useState } from 'react'

import { Redirect } from 'react-router-dom'

import { UserProps } from '../models/user'

import Nav from '../components/Nav'

import Menu from '../components/Menu'

import axios from 'axios'

const Layout = (props: any) => {

const userURL = 'user'

const [redirect, setRedirect] = useState(false)

// User情報のState

const [user, setUser] = useState<UserProps | null>(null)

useEffect(() => {

(

async () => {

try {

const { data } = await axios.get(userURL)

// User情報をセット

setUser(data)

} catch(e) {

setRedirect(true)

}

)()

}, [])

if (redirect) {

// ログイン画面へリダイレクト

return <Redirect to={'/login'} />

}

return (

<div>

{props.children}

</div>

</main>

</div>

)

}

export default Layout

Nav.tsx

// src/components/Nav.tsx
import { Link } from 'react-router-dom'
import { UserProps } from '../models/user'
import axios from 'axios'

// propsを追加
const Nav = (props: { user: UserProps | null }) => {
  const logout = async () => { await axios.post('logout') }

	return (
    <header className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
      <a className="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
      <div className="navbar-nav">
        <div className="nav-item text-nowrap">
          <Link
            to={'/profile'}
            className="nav-link px-3"
          >
            {props.user?.first_name} {props.user?.last_name}
          </Link>
          <Link
            to={'/login'}
            className="nav-link px-3"
            onClick={logout}
          >
            Sign out
          </Link>
        </div>
      </div>
    </header>
	)
}

export default Nav

// src/components/Nav.tsx

import { Link } from 'react-router-dom'

import { UserProps } from '../models/user'

import axios from 'axios'

// propsを追加

const Nav = (props: { user: UserProps | null }) => {

const logout = async () => { await axios.post('logout') }

return (

<a className="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>

<Link

to={'/profile'}

className="nav-link px-3"

{props.user?.first_name} {props.user?.last_name}

</Link>

<Link

to={'/login'}

className="nav-link px-3"

onClick={logout}

Sign out

</Link>

</div>

</header>

)

}

export default Nav

user.ts

// models/user.ts

export class User {
	first_name: string
	last_name: string
	email: string
	password: string
	password_confirm: string

	constructor(
		first_name: string, last_name: string, email: string,
		password: string, password_confirm: string) {

		this.first_name = first_name
		this.last_name = last_name
		this.email = email
		this.password = password
		this.password_confirm = password_confirm
	}
}

export interface UserProps {
	id: number
	first_name: string
	last_name: string
	email: string
}

// models/user.ts

export class User {

first_name: string

last_name: string

email: string

password: string

password_confirm: string

constructor(

first_name: string, last_name: string, email: string,

password: string, password_confirm: string) {

this.first_name = first_name

this.last_name = last_name

this.email = email

this.password = password

this.password_confirm = password_confirm

}

export interface UserProps {

id: number

first_name: string

last_name: string

email: string

}

Menu.tsx

// src/components/Menu.tsx

const Menu = () => {
	return (
		<nav id="sidebarMenu" className="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
		<div className="position-sticky pt-3">
			<ul className="nav flex-column">
			<li className="nav-item">
				<a className="nav-link active" aria-current="page" href="#">
				<span data-feather="home"></span>
					Dashboard
				</a>
			</li>
			</ul>
		</div>
		</nav>
	)
}

export default Menu

// src/components/Menu.tsx

const Menu = () => {

return (

Dashboard

</a>

</li>

</ul>

</div>

</nav>

)

}

export default Menu

User.tsx

// pages/Users.tsx
import Layout from '../components/Layout'

const Users = () => {
	return (
		<Layout>
			<table className="table table-striped table-sm">
				<thead>
					<tr>
						<th scope="col">#</th>
						<th scope="col">Header</th>
						<th scope="col">Header</th>
						<th scope="col">Header</th>
						<th scope="col">Header</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1,001</td>
						<td>random</td>
						<td>data</td>
						<td>placeholder</td>
						<td>text</td>
					</tr>
				</tbody>
			</table>
		</Layout>
	)
}

export default Users

// pages/Users.tsx

import Layout from '../components/Layout'

const Users = () => {

return (

<thead>

<tr>

<th scope="col">Header</th>

</tr>

</thead>

<tbody>

<tr>

<td>random</td>

<td>placeholder</td>

</tr>

</tbody>

</table>

</Layout>

)

}

export default Users

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

[React]~Admin画面5:ログイン認証とログアウトの実装 ~

前回

事前準備

フォルダ/ファイル

コンポーネントとProps

ログイン認証機能

ログイン済みかチェックする

ログアウト

Propsインターフェースの定義

ルーティング処理

ログアウトの実装

検証

次回

Reactまとめ

参考書籍

ソースコード

Layout.tsx

Nav.tsx

user.ts

Menu.tsx

User.tsx

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

前回

事前準備

フォルダ/ファイル

コンポーネントとProps

ログイン認証機能

ログイン済みかチェックする

ログアウト

Propsインターフェースの定義

ルーティング処理

ログアウトの実装

検証

次回

Reactまとめ

参考書籍

ソースコード

Layout.tsx

Nav.tsx

user.ts

Menu.tsx

User.tsx

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Golang]Proxyパターンを学ぼう!~Version 2~

Django Rest Frameworkを学ぼう! ~@api_viewつ…

CSSで画像取得アプリのスタイリングをしよう!

[Golang]~MovieApp-router1: JWTを使ってSign…

Django開発~ブログ構築編1~プロジェクト作成

CSSでアナログ時計のスタイリングをしよう!

[React]~Ambassador画面8:ソート機能を実装しよう!~

React~記事まとめ~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル