ホームページ > ウェブフロントエンド > jsチュートリアル > Vue ルートがジャンプするときにユーザーがログインしているかどうかを判断する

Vue ルートがジャンプするときにユーザーがログインしているかどうかを判断する

小云云
リリース: 2018-01-02 13:54:02
オリジナル
3155 人が閲覧しました

ユーザーがログインしているかどうかを判断し、ログインしていない場合はログインルートにジャンプし、ログインしている場合は通常にジャンプします。この記事では主に、Vue ルーティングジャンプ時にユーザーがログインしているかどうかを判定する機能の実装について説明します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1 つ目: まず、ユーザーがログインしているかどうかを識別するために、ユーザーがログインする前と後のステータスを与えます (vuex を使用することをお勧めします)。わからない場合は、単に vuex を使用します。詳細については、公式 Web サイトにアクセスしてください。

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

var state = {
  isLogin:0,     //初始时候给一个 isLogin=0 表示用户未登录
};

const mutations = {
  changeLogin(state,data){
    state.isLogin = data;
  }

};
ログイン後にコピー

2 番目: ユーザーがログインするときにログイン ステータスを変更する

3 つ目は、ルート エントリにナビゲーション フックを追加することです。特定の意味のコード;

検証が必要なルートを設定します

 this.$store.commit(‘changeLogin‘,‘100‘)   
 //登录后改变登录状态 isLogin = 100 ;
ログイン後にコピー

2 番目のルート ジャンプして確認してください

{ path: ‘/admin‘, 
  component: Admin,
  meta:{auth:true} // 设置当前路由需要校验  不需要校验的路由就不用写了;不要问为什么,自己去看官网

  }
ログイン後にコピー

学習しましたか?皆さんのお役に立てれば幸いです。

関連する推奨事項:


携帯電話番号を取得するための WeChat アプレットの説明例 ログイン関数

ThinkPhp 検証コード ログイン関数の実装例

ThinkPHP のログインおよびログアウト関数コードの詳細説明

以上がVue ルートがジャンプするときにユーザーがログインしているかどうかを判断するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート