skillup

技術ブログ

JavaScript

vue-routerと認証など

投稿日:2022年3月13日 更新日:

vue-routerで簡単な認証に関する処理など。

例によって

https://github.com/umanari145/admin_tool

を題材に。

サーバーサイドとのルーティング

サーバー側のルーティングを制御していないとURLを直で叩いても404になることに注意。

ちなみにlaravelのルーティングであれば、

でOK。要はこれより上部で拾えなかったら全てここにくる(welcomeはvueを読み込んだbladeという意味)

vue-router×vuex

https://github.com/umanari145/admin_tool/blob/main/resources/js/router/index.js

  • 基本的にログインに関するユーザー情報の変数はvuexで管理することになると思うのでvuexが必須
  • 認証と非認証ページをつかいわける(上のソースでいうと meta:{requireAuth:true} )
  • version3と4で呼び出し方が少し変わるので注意。

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

yarnコマンド

JSやフロント側のライブラリを使うときはnpmを使ってたんですが、2〜3年前ぐらいからyarnというコマンドも使われているので、ちょっと調査を。 Contents1 yarnとは?2 よく使いそうなコ …

no image

ECMAScriptについて復習

ここ数年のJavaScript界隈は進化が激しく、私の知識はレガシーな状態で止まっているので、自分に備忘録として整理しておこうと思います。 Contents1 ECMAScriptとは?2 ECMAS …

no image

jQueryの書き方について

jQueryの書き方は一般的に以下のように書きます。

上記の処理ですが、細かく書くとDOMが構築されてから実行という意味が含まれていま …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

アーカイブ