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

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

ECMAScriptについて復習

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

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

アーカイブ