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

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

アーカイブ