skillup

技術ブログ

JavaScript

vue-routerと認証など

投稿日:

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

例によって

https://github.com/umanari145/admin_tool

を題材に。

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

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

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

でOK

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

ケース別JavaScriptライブラリまとめ

Webエンジニアとしてはサーバーサイドのプログラムのみならず、JavaScriptをいじることがおおいでしょう。 私自身、昔はわけがわからず大嫌いだったんですが、最近はデバッグが楽なこともあり、結構愛 …

no image

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

アーカイブ