参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いです。具体的な原則については、前回の記事を参照してください。 Vue でシングル サインオンを実装する方法は N 通りあります。ここでは 2 つのシステムがあります。1 つはログイン システムのメイン エンドです。すべてのサブシステムまたは関連システムのログイン プロセスはここで完了します。 具体的なコードは次のとおりです: login.vue <テンプレート> <div class="hello"> <h1>{{ メッセージ }}</h1> <button @click="handleLogin">クリックしてログイン</button> <button @click="rethome">前のページに戻る</button> </div> </テンプレート> <スクリプト> 'js-cookie' から Cookies をインポートします エクスポートデフォルト{ 名前: 'ホーム', データ () { 戻る { メッセージ: 'システム 1: 統合ログイン ページ', } }, マウントされた(){ const トークン = Cookies.get('app.token'); if(トークン){ this.rethome(); } }, メソッド: { ハンドルログイン() { var トークン = this.randomString(); Cookies.set('app.token',token, { expires: 1000, path: '/',domain: '.xxx,com' }) //ウェブサイトのメインドメイン名を記入します if(Cookies.get('app.returl')){ Cookies.set('app.loginname','System 2', { expires: 1000, path: '/',domain: '.xxx,com' })//ウェブサイトのメインドメイン名を記入}else{ Cookies.set('app.loginname','System 1', { expires: 1000, path: '/',domain: '.xxx,com' }) // ウェブサイトのメインドメイン名を記入します} this.rethome(); }, 戻る(){ var returl = Cookies.get('app.returl'); if(returl){ Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を入力します window.open(returl,"_parent"); }それ以外{ this.$router.push("/"); } }, ランダム文字列(e) { e = e || 32; var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678", a = tの長さ、 n = ""; (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a)); 戻るn } } } </スクリプト> <!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します --> <スタイルスコープ> h1、h2 { フォントの太さ: 標準; } ul { リストスタイルタイプ: なし; パディング: 0; } li { 表示: インラインブロック; マージン: 0 10px; } { 色: #42b983; } </スタイル> ホーム.vue <テンプレート> <div class="hello"> <h1>{{ メッセージ }}</h1> <h3>ユーザー情報: {{token}}</h3> <h3>ログイン場所: {{loginname}}</h3> <button @click="logout">ログアウト</button> </div> </テンプレート> <スクリプト> 'js-cookie' から Cookies をインポートします エクスポートデフォルト{ 名前: 'ホーム', データ () { 戻る { メッセージ: 'システム 1 メイン ページ'、 トークン:''、 ログイン名:'' } }, マウントされた(){ const トークン = Cookies.get('app.token'); this.token = トークン; const loginname = Cookies.get('app.loginname'); this.ログイン名 = ログイン名; console.log(トークン); if(!トークン){ this.$router.push("/login"); }それ以外{ this.rehome() } }, メソッド: { ログアウト(){ Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })//ウェブサイトのメインドメイン名を記入します。Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })//ウェブサイトのメインドメイン名を記入します。this.$router.go(0) }, 戻る(){ var returl = Cookies.get('app.returl'); if(returl){ Cookies.set('app.returl','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を入力します window.open(returl,"_parent"); }それ以外{ } }, } } </スクリプト> <!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します --> <スタイルスコープ> h1、h2 { フォントの太さ: 標準; } ul { リストスタイルタイプ: なし; パディング: 0; } li { 表示: インラインブロック; マージン: 0 10px; } { 色: #42b983; } </スタイル> システムにログインしたら、手順の半分は完了です。次のステップは、コンポーネントを作成し、呼び出し側でメソッドを呼び出すことです。ここでは、ケース制御コードを紹介します。 <テンプレート> <div class="hello" v-show="false"> </div> </テンプレート> <スクリプト> 'js-cookie' から Cookies をインポートします エクスポートデフォルト{ 小道具:{ タイプ:{ タイプ:文字列、 デフォルト:'getdata' } }, 名前: 'ホーム', データ () { 戻る { トークン:''、 ログイン名:'' } }, マウントされた(){ const トークン = Cookies.get('app.token'); this.token = token?token:'ログインしていません'; const loginname = Cookies.get('app.loginname'); this.loginname = loginname?loginname:'ログインしていません'; この関数は、 }, メソッド: { 戻り値Fun(){ varデータ = { トークン:this.token, ログイン名:this.ログイン名 } this.$emit("clickFun",データ); } }, 時計: 'type': 関数 (値) { const トークン = Cookies.get('app.token'); this.token = token?token:'ログインしていません'; const loginname = Cookies.get('app.loginname'); this.loginname = loginname?loginname:'ログインしていません'; スイッチ(val){ ケース 'ログイン': console.log(トークン); if(トークン != ''){ このメソッドは、 }それ以外{ Cookies.set('app.returl','Local route', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を入力します window.open('ログイン システム アドレス',"_parent"); } 壊す; 'ログアウト'の場合: Cookies.set('app.token','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を記述します Cookies.set('app.loginname','', { expires: 1000, path: '/',domain: '.xxx,com' })// ウェブサイトのメインドメイン名を記述します。 this.token = 'ログインしていません'; this.loginname = 'ログインしていません'; このメソッドは、 壊す; ケース 'getdata': このメソッドは、 壊す; } } } } </スクリプト> <!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します --> <スタイルスコープ> h1、h2 { フォントの太さ: 標準; } ul { リストスタイルタイプ: なし; パディング: 0; } li { 表示: インラインブロック; マージン: 0 10px; } { 色: #42b983; } </スタイル> 呼び出しコードの例は次のとおりです。 <テンプレート> <div class="hello"> <ログイン @clickFun="returnFun" :type ="type"></ログイン> <h1>{{ メッセージ }}</h1> <h3>ユーザー情報: {{token}}</h3> <h3>ログイン場所: {{loginname}}</h3> <button @click="login">ログイン</button> <button @click="logout">ログアウト</button> </div> </テンプレート> <スクリプト> 'js-cookie' から Cookies をインポートします '@/pages/login' からログインをインポートします エクスポートデフォルト{ 名前: 'ホーム', データ () { 戻る { メッセージ: 'システム 2: 親コンポーネント ページ', トークン:'ログインしていません', loginname:'ログインしていません', タイプ: 'getdata', } }, マウントされた(){ }, メソッド: { ログイン(){ this.type = "ログイン"; }, ログアウト(){ this.type = "ログアウト"; }, returnFun(値){ console.log(値、サブコンポーネントの戻り値) 定数トークン = 値.トークン; this.token = token?token:'ログインしていません'; const ログイン名 = 値. ログイン名; this.loginname = loginname?loginname:'ログインしていません'; } }, コンポーネント:{ ログイン } } </スクリプト> <!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します --> <スタイルスコープ> h1、h2 { フォントの太さ: 標準; } ul { リストスタイルタイプ: なし; パディング: 0; } li { 表示: インラインブロック; マージン: 0 10px; } { 色: #42b983; } </スタイル> この時点で、シンプルなシングル サインオン システムの構築が完了しました。このアイデアに従って改善を続け、最終的に対応する制御を行うことができます。もし役に立つなら、ぜひフォローしてください。一緒に議論し、学び、一緒に進歩できるように、技術ドキュメントを定期的に更新します。 Vue シングル サインオン制御コードの共有に関するこの記事はこれで終わりです。Vue シングル サインオンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ユーザーのニーズがマーケティング指向のデザインにつながる
>>: Tomcat が localhost に通常アクセスすると 404 を報告する問題の解決方法
プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...
この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...
固定サイドバーを実装するにはJavaScriptを使用します。参考までに、具体的な内容は次のとおりで...
私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...
Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...
目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...
Linux/Mac の MySQL パスワードを忘れた場合はどうすればいいですか?心配しないでくださ...
キープアライブとは何ですか?通常の開発では、コンポーネントによっては複数回初期化する必要のないものも...
この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...
1. 背景実際のプロジェクトでは、分散スケジュールされたタスク実行の状況に遭遇することがあります。ス...
今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...
シナリオ:テーブル内のデータは、同期ツールを使用して他のデータベースと同期する必要があり、増分同期に...
リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...
開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえ...
この記事では、VMware Toolsのインストールと構成に関するグラフィックチュートリアルを参考と...