常連

### 実現したいこと
フロントはnext.js
バックエンドはlaravelを使用しています。
ログインページでメールアドレスとパスワードでログインしマイページに遷移。
その後現在のユーザー情報を取得したい

### 発生している問題・分からないこと
マイページ遷移後にusers/meでユーザー情報を取得することができない

このトークンをcookieに持たせておいて
apiClient.get('/api/users/me');で自動的に渡すようにすることは可能なのでしょうか？
ローカルストレージに保持しておく以外の方法を模索しています。

### エラーメッセージ
```error
GET http://localhost/api/users/me 401 (Unauthorized)
Mypage.tsx:34 予期しないエラー: 
AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_REQUEST"
config
: 
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
: 
"Request failed with status code 401"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: true, upload: XMLHttpRequestUpload, …}
response
: 
{data: {…}, status: 401, statusText: 'Unauthorized', headers: AxiosHeaders, config: {…}, …}
stack
: 
"AxiosError: Request failed with status code 401\n    at settle (webpack-internal:///(app-pages-browser)/../node_modules/axios/lib/core/settle.js:21:16)\n    at XMLHttpRequest.onloadend (webpack-internal:///(app-pages-browser)/../node_modules/axios/lib/adapters/xhr.js:106:72)\n    at Axios.request (webpack-internal:///(app-pages-browser)/../node_modules/axios/lib/core/Axios.js:40:49)\n    at async MyPage (webpack-internal:///(app-pages-browser)/./src/components/Mypage.tsx:16:33)"
[[Prototype]]
: 
Error
MyPage	@	Mypage.tsx:34
Show 16 more frames
```

### 該当のソースコード

```Login.tsx
"use client";
import React, { useContext } from 'react';
import { Button, Input, PasswordInput } from '@mantine/core';
import axios from 'axios';
import { useRouter } from 'next/navigation';

const http = axios.create({
    baseURL: 'http://localhost',
    withCredentials: true,
});

const Login = () => {
    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('');
    const router = useRouter();

    const postData = async () => {
        axios.get('http://localhost/sanctum/csrf-cookie', { withCredentials: true }).then((res: any) => {
          console.log(res.data);
            console.log("CSRF Cookie set successfully.");
            http.post('/api/login', { email, password }).then((res) => {
                console.log(res.data);//トークンの値
                router.push('/mypage');
            }).catch((error) => {
                console.error("Login failed:", error);
            });
        });
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
            <h2>ログインページ</h2>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '20vh', border: '1px solid #ccc', borderRadius: '5px', padding: '3%', marginBottom: '2%' }}>
                <div style={{ display: 'grid', margin: '1%' }}>
                    <label htmlFor="email">Email</label>
                    <Input
                        placeholder="Email"
                        style={{ width: '300px' }}
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>

                <div style={{ display: 'grid', margin: '1%' }}>
                    <label htmlFor="password">Password</label>
                    <PasswordInput
                        placeholder="Password"
                        style={{ width: '300px' }}
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </div>
            </div>

            <Button onClick={postData}>ログイン</Button>
        </div>
    );
};

export default Login;

```

```Mypage.tsx
"use client";
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

import apiClient from '@/utils/axios';

const MyPage = async () => { 
  const router = useRouter();
  
  try {
    const { data, error } = await apiClient.get('/api/users/me');

    if (error) {
      // エラー処理を改善
      console.error(error);
      if (error.response?.status !== 409) throw error; // レスポンスステータスを確認
      router.push('/');
    }

    // 成功した場合、ユーザーデータを表示
    return (
      <div>
        <h1>マイページ</h1>
        {data && (
          <div>
            <p>名前：{data.name}</p>
            <p>メールアドレス：{data.email}</p>
          </div>
        )}
      </div>
    );
  } catch (error) {

    console.error("予期しないエラー:", error);

  }
};

export default MyPage;

```

```axios.tsx
import Axios from 'axios'

const apiClient = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_LARAVEL_APP_URL,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
  },
  withCredentials: true,
})

export default apiClient

```

```api.php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Models\User;


Route::post('/register', 'App\Http\Controllers\AuthController@register');
Route::post('/login', 'App\Http\Controllers\AuthController@login');
Route::get('/users/me', 'App\Http\Controllers\AuthController@me')->middleware('auth:sanctum');

```

```AuthController.php
<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    // ユーザー登録
    public function register(Request $request) {
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);
        $json = [
            'data' => $user
        ];
        return response()->json( $json, Response::HTTP_OK);
    }
   
    public function login(Request $request)
    {
       
        $user = User::where('email', $request['email'])->firstOrFail();

        $token = $user->createToken('auth_token')->plainTextToken;

        return response()->json([
            'access_token' => $token,
            'token_type' => 'Bearer',
        ]);
    }

    public function me(Request $request)
    {
        Log::info('Request data:', $request->all());
        return $request->user();
    }
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
postmanで
http://localhost/api/users/me
に対してget通信でログイン時の
http.post('/api/login', { email, password }).then((res) => {
                console.log(res.data);//トークンの値
で取得したトークンを一緒に渡したらユーザー情報が帰ってきました。



### 補足
laravel 10.38.2
next.js 14.1
docker

next.js laravel sanctum ログイン認証の問題

```コーディング約半年の者です。
独学で勉強しながら、仕事をしており、JavaScriptやjQueryなども
既存のコードであれば、ネット上に使用方法があるので扱えるようになってきたのですが、
壁にぶち当たりそうになってきているので、どのような思考をすればランキング上位の方達
のようにどんな質問でも答えられるようになるのでしょうか？・・・と疑問が湧いています。

そこで、以下の質問に答えていただけますと幸いです。
```

###Q1.JavaScriptで既存のコードを使わずに自分で開発するまでにどれくらいの制作期間を要するのでしょうか？
※プロジェクトによって全然変わると思うのですが、例えば、最近WEBサイトでよく見る
トップページで独自の画面ロードアニメーションの後に、サイトが表示されるもの
参考：https://www.m-hand.co.jp/


###Q2.ランキング上位者の方達はコードの引き出しが非常に多いように感じるのですが、全て暗記しているのですか？
※私はコードを覚えきれないので、自分の雑記ブログにメモ用に保存して、忘れた都度開いて使用しています。
※パソコンのテキストの暗記機能も使っているのですが、どのように登録したのか忘れてしまうときもあるので不便に感じています。


###Q3.暗記以外で効率よくコードを引き出す方法などがあれば教えてください。


###Q4.JavaScriptやjQueryをマスターする上で参考になる書籍や学習コンテンツがあれば教えてください。
※ドットインストールとプロゲートで基礎学習は一通り学習したため、時間はかかりますが既存のコードを読むことはできます。
必要箇所のみの編集はできますが、応用して編集することができません。

###Q5.上位者の方達は複数言語をマスターしているように見受けられるのですが、初学者の私でも広く浅く理解しておくべきでしょうか？それともJavaScriptやjQueryをまずマスターすべきでしょうか？

お忙しいところ恐れ入りますがご回答いただけましたら幸いです。
よろしくお願いいたします。

teratailランキング上位の方の思考が知りたいです。

タイトルの通りなのですが、プログラミングを使って作りたいものがあった時、それを作るときにどうやって実装の仕方を調べたり、プログラムの組み立て方を考える、もしくは調べますか？考え方の思考手順や調べ方が知りたいです。

例えば、プログラムに何か絵を描かせてjpgやpngで出力させたいとした場合、どうやって調べたら良いでしょうか？（例えが悪くて答え難かったらすみません。）

ざっくりとした質問で申し訳ありませんが教えて下さると助かります。

宜しくお願い致します。

プログラミングを使って作りたいものがある時の調べ方、プログラムの組み立て方

## テーマ、知りたいこと

PowerShellのスクリプトファイルの実行は
デフォルトでは出来ないので、セキュリティーレベルを下げるしかないと思います。

このセキュリティーレベルを下げることに対して抵抗があるのですが
どのような運用がいいのでしょうか。

## Power Shellのスクリプトファイルを実行できるようにする方法

PowerShellのコマンドで以下等のコマンドを実行する。
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -scope CurrentUser
とローカルで作ったスクリプトや使えるようになる。

Set-ExecutionPolicy

-ExecutionPolicy
|実行ポリシー|説明|
|:--|:--|
|Restricted|すべてスクリプトの実行を禁止|
|AllSigned|すべてのスクリプトに証明書を要求|
|RemoteSigned|インターネットからダウロードしたスクリプトに証明書を要求|
|Unrestricted|すべてのスクリプトの実行を許可|

-Scope
|実行ポリシー|説明|
|:--|:--|
|Process|現在のWindows PowerShellプロセスに対して設定された実行ポリシー|
|CurrentUser|現在のユーザに対して設定された実行ポリシー|
|LocalMachine|コンピューターのすべてのユーザーに対して設定された実行ポリシー|
|UserPolicy|コンピューターの現在のユーザーのグループポリシーによって設定された実行ポリシー|
|MachinePolicy|マシングループポリシーによって設定された実行ポリシー|


RemoteSignedの場合
ネットからダウンロードしたファイルは、実行できない。
そのあと、コピーしたファイルも実行できない。
中身を編集して上書き保存すると実行できるようになる。
「インターネットから取得したファイル」というのが
どの程度のファイルなのかは、具体的な定義は私にはまだわかっていません。

証明書をつける方法について
まだ調べてないのでわかりません。

## 背景

VBScriptが非推奨になったため、代替手段を知りたい。

## 問題視していること

セキュリティーレベルを下げる場合、使用する端末すべてで上述のコマンドを実行する必要がある。
このセキュリティーレベルを下げることについて説得力のある正当化が私にはできない。
また、そのコマンドを実行していくのも手間がかかるため抵抗がある。

## コメントに対して
「調査したことだけ・試したことが記載されていない質問」
「やってほしいことだけ」と言うような感じの指摘が来ました。

何を追記すればいいのかよくわかりませんが
少し調査したことなどを記載します。
指摘には、出来れば、何を追記してほしい。と言う旨記載して頂けると幸いです。


PowerShellの運用について

フロントエンドの勉強にてReactの基礎部分を学習し、簡易的ですが一からFirebaseと連携させたチャットWebアプリを作成したりしました。
次にNext.jsについても学習しようと思いちょうどセールがやっていたので、UdemyのNext.jsを使用したハンズオン形式の講座を購入し進めています。
ただ講座内でいろんなツールを使用しており、コードを写経するのに必死になってしまい、結局何をやっているかがわからなくなり、うまく自分の中に落とし込めていない感じがしておりモヤモヤしています。
そこで下記流れで学習することで、身に着けることができるかと思っておりますが、
無駄に時間を使っているのかなとも思ってしまっております。
進め方は人それぞれかと思いますが、
みなさんが思う効率的な学び方があればお聞きしたく思います。

■学習の流れ
1．講座を見ながら写経し、一つのWebアプリを完成させる
↓
2．自分で入力したコードを見ながら、再度講座を見直し用語ややったことのポイントをまとめる
↓
3．同じツールを使用し、一から何かWebアプリを作成する。作成する上でわからないことがあれば、講座を見直し問題解決のヒントとしても活用する