@yumoyumo (yumo yumo)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Laravel ユーザの権限によってvueコンポーネントを出しわけるについて

解決したいこと

ここに解決したい内容を記載してください。

step2のLaravel ユーザでログインして Vue画面を表示するまでは出来たのですが
Laravel ユーザの権限によってvueコンポーネントを出しわけるについてでLogin画面は出ますが
Login後にExample component,Admin componentが表示されません。
ソースは記事のものをそのままコピーしています。

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
キャッシュが残っているのではないかと思い、 php artisan cache clearやphp artisan config clear
npm run devなどのコマンドを打ちますが特にエラーになりません。
dump-autoloadも試しました。

また、gate機能が機能していないのではないかと思い、home.balade.phpの


@can('admin')
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
>
@else
id="{{ Auth::user()->id }}"
name="{{ Auth::user()->name }}"
role="{{ Auth::user()->role }}"
logout="{{ route('logout') }}"
>
@endcan

部分を



にしてみてnpm run devを掛けましたがやはり変わりなくlogin後ページが表示されません。

因みにstep2まではexample conponentが表示されていました。
loginとして試した内容は、,idがmaple_admin passwordがpassword(管理者)と idがmaple_user passwordがpassword(ユーザー)です。

記事と一点違うのは、MAMPを使っていますので/Applications/MAMP/htdocs/プロジェクトのルートを使っています。
migrateやseedは問題なく動いていて、データは登録できています。

自分で色々試しましたがこれ以上は無理そうなのでご教授頂ければ幸いに存じます。

0 likes

3Answer

申し訳ありませんが、情報が足りないのでどなたも答えにくい状況だと思います。

step2のLaravel ユーザでログインして Vue画面を表示するまでは出来たのですが
(略)
ソースは記事のものをそのままコピーしています

おそらく、何かの書籍かどこかの Web サイトの手順の step2 までやったということですよね?
何を見ているのかの情報がないと、いったい何をやって、どのようなソースなのかが誰もわからないです。

また、ソースを載せるときにはコードブロックにしてもらえると見やすくなります。
特に、php のようなタグがあるコードだと、マークダウン内での HTML 記述と区別がつかなくて、表示されないので、意味が分かりません。

```php
<div id="app">
@can('admin')
<admin-component
    id="{{ Auth::user()->id }}"
    name="{{ Auth::user()->name }}"
    role="{{ Auth::user()->role }}"
    logout="{{ route('logout') }}"
></admin-component>
@else
<example-component
    id="{{ Auth::user()->id }}"
    name="{{ Auth::user()->name }}"
    role="{{ Auth::user()->role }}"
    logout="{{ route('logout') }}"
></example-component>
@endcan
</div>
```

のように、コードの前後を ``` などで囲ってください。
コードの前の ``` にコードの種類(たいていはファイルの拡張子と同じもので大丈夫です) をしていると、コードハイライトがされるので、よりわかりやすくなります。以下のような感じで表示されます。

<div id="app">
@can('admin')
<admin-component
    id="{{ Auth::user()->id }}"
    name="{{ Auth::user()->name }}"
    role="{{ Auth::user()->role }}"
    logout="{{ route('logout') }}"
></admin-component>
@else
<example-component
    id="{{ Auth::user()->id }}"
    name="{{ Auth::user()->name }}"
    role="{{ Auth::user()->role }}"
    logout="{{ route('logout') }}"
></example-component>
@endcan
</div>

コードハイライトのやりかたがわからない場合には、前後を ``` の行でくくるだけでも良いです。

画面がおかしい、ということであればスクリーンショットを貼り付けるなどすると、状況を理解しやすくなります。ファイルをアップロードするか、あるいは画像をコピーしてから、ここの入力画面でペーストすれば載せられると思います。

コードハイライトや、画像の貼り付け結果は、入力エリアの上部についている「プレビュー」を押せば見ることができます(再度編集する場合には「編集」を押してください)

まずは詳細情報を追記してもらえますか?


【追記】こんな感じかな

解決したいこと

以下の記事を参考に

step2のLaravel ユーザでログインして Vue画面を表示するまでは出来たのですがLaravel ユーザの権限によってvueコンポーネントを出しわけるについてでLogin画面は出ますがLogin後にExample component,Admin componentが表示されません。
ソースは記事のものをそのままコピーしています。

自分で試したこと

キャッシュが残っているのではないかと思い、 php artisan cache clearやphp artisan config clear
npm run devなどのコマンドを打ちますが特にエラーになりません。
dump-autoloadも試しました。

また、gate機能が機能していないのではないかと思い、home.balade.phpの

home.balade.php
    <div id="app">
        @can('admin')
            <admin-component
                id="{{ Auth::user()->id }}"
                name="{{ Auth::user()->name }}"
                role="{{ Auth::user()->role }}"
                logout="{{ route('logout') }}"
            ></admin-component>
        @else
            <example-component
                id="{{ Auth::user()->id }}"
                name="{{ Auth::user()->name }}"
                role="{{ Auth::user()->role }}"
                logout="{{ route('logout') }}"
            ></example-component>
        @endcan
    </div>

部分を

    <div id="app">
        <example-compoment></example-component>
    </div>

にしてみてnpm run devを掛けましたがやはり変わりなくlogin後ページが表示されません。

因みにstep2まではexample conponentが表示されていました。
loginとして試した内容は、,idがmaple_admin passwordがpassword(管理者)と idがmaple_user passwordがpassword(ユーザー)です。

記事と一点違うのは、MAMPを使っていますので/Applications/MAMP/htdocs/プロジェクトのルートを使っています。
migrateやseedは問題なく動いていて、データは登録できています。

自分で色々試しましたがこれ以上は無理そうなのでご教授頂ければ幸いに存じます。

0Like

2019年3月13日に更新されているQiitaの
”Laravel+Vue+Vuetifyで業務サイト作ってみる”を参照させて頂いています。
STEP01~STEP15まで記事が載っています。
今回は、その中のstep03について質問をさせていただきました。
ユーザー権限と管理者権限での表示切替方法を,ほぼ記事の通り自身のPC上で実現しようとしています。
STEP02ではユーザー権限でログインした時にExaple-Componetを表示する所まで
STEP03ではユーザー権限と管理者権限でログインをしたときに表示される画面が
Admin-ComonentとExample-Componetに出し分けるという内容になっています。
今回、書かれている記事通りほぼコピペで実現しようとしたのですがログイン画面までは
表示されるのですが管理者、ユーザーでログインしても何も表示されません。
ソースファイルは、記事をそのままコピペして試していることと結構ボリュームがあり
エラーを起こしている部分が特定できないので添付していません。

自身のpcのターミナルでphp artisan serveしてhttp:127.0.0.1:8000でアクセス
ログインした結果(何も表示されない)を添付させていただいております。
Example-compnentやAdmin-componetが表示されない原因が知りたいと思っています。
よろしくお願いします

0Like

何も表示されていないという画面で、ブラウザの開発ツールのコンソールを見たらエラーが表示されませんか?

もし Chrome を使っているなら右上のメニューボタン→「その他のツール」→「デベロッパーツール」などで開いて、タブの「Console」を選ぶ。

推測としては、コピーするときに何かを間違えていて、うまく表示ができないのではないかと思います。

もしブラウザのコンソールにエラーが表示されていない場合には、サーバ側で何かエラーが起きている可能性があると思います。

0Like

Your answer might help someone💌