login_push

Vue+Koa2 は jwt を使用してシングル サインオンを実装しますか?

---

2018-12-17

READMEこの更新は主に、壊れた画像接続を補うことを目的としています。

私の個人的な観点から言えば、この種のフルスタック プロジェクトは非常に実用的で、ページ上では同様の todo を直接書くことができます。 , 知識ポイントがたくさんあります

• 実際に jsonwebtoken を使用するにはどうすればよいですか?
• シングルサインオンルーティングの制御
• koa2使って満足のいくバックエンド開発環境を構築する方法
• mongodb理解し、導入を完了し、API の一般的な使用法を理解する
• フロントエンドのVue Reactなどと同じように、書けば書くほど熟練していきます。

どのように機能するのでしょうか?

必要な環境：安装并启动的mongodb （環境に問題があると確実に起動しません）

git clone https://github.com/vkcyan/login_push.git

// 服务端
cd server
npm install
npm install start

//客户端
cd client
npm install
npm install start

(クライアント)クライアント:

• ビュー
• vueルーター
• アクシオス
• 要素
• jsonウェブトークン

(サーバー)サーバー

• コア2
• コアボディパーサー
• コアルーター
• MD5
• マングース
• 午後2時

どのような機能が実装されているのでしょうか？

• ログイン
• 登録する
• ログアウト
• todolist 追加 削除 ビューの変更
• todolist の複数選択操作

jwt検証モード

ここでは、トークンはlocalStorageに保存されます。別の方法は、コードが少し変わる可能性がありますが、効果はまったく同じです。

ログイン

レジストリ

トドリスト

経路制御についての考え方

 router . beforeEach ( ( to , from , next ) => {
  let token = localStorage . getItem ( 'token' ) // 获取token

  if ( to . name == 'login' ) { // 假如登录 判断token是不是存在 存在让他跳转到主页面
    verification ( token , next )
    . then ( ( data ) => {
      if ( data . data . type ) { // type 为1 直接跳过登录
        Message ( {
          showClose : true ,
          message : '您已经登录,重新登录请退出账户'
        } ) ;
        next ( '/todolist' )
      } else {
        next ( )
      }
    } )
  }

  if ( to . name == 'todoList' ) {
    verification ( token , next )
    . then ( ( data ) => {
      if ( data . data . type ) {
        // type 为1说明token没有失效
        // 跳转到主页面
        next ( )
      } else {
        // token失效 强制定位到登录页面
        if ( token === null ) { // 说明从来没有登陆过
          Message ( {
            showClose : true ,
            message : '您还没有登录' ,
            type : 'warning'
          } )
          next ( '/login' )
        } else {
          Message . error ( '登录信息失效' )
          next ( '/login' )
          localStorage . removeItem ( 'token' )
        }
      }
    } )
    . catch ( ( data ) => {
      console . log ( data ) ;
    } )
  }

  if ( to . meta . title ) {
    document . title = to . meta . title
  }
} )



// 验证
let verification = ( token , next ) => {
  return axios . post ( '/api/verification' , { token } )
}

バックエンドの統合検証インターフェイス/api/verification 、各ルーティング ジャンプによって、トークンの有効期限が切れているか、変更されているかが判断されます。

ログインせずに

最初のログイン トークンが存在しない場合、バックエンドは 0 で応答し、直接渡す必要があります。

ログインしていない場合は、ログイン後のページに移動します。ログインしていない場合は、トークンが別途求められます。

 if ( token === null ) { // 说明从来没有登陆过
          Message ( {
            showClose : true ,
            message : '您还没有登录' ,
            type : 'warning'
          } )
          next ( '/login' )
        } else {
          Message . error ( '登录信息失效' )
          next ( '/login' )
          localStorage . removeItem ( 'token' )
        }

これは、next() までのloginタイプが 0 である必要があることを意味します。

ログイン時

トークンはすでに存在しており、タイプは 1 です。 /todoListにアクセスすると、 next()

/loginにアクセスし、タイプは 1 で/todolistにジャンプし、ユーザーにプロンプ​​トを表示します。

 if ( data . data . type ) { // type 为1 直接跳过登录
  Message ( {
    showClose : true ,
    message : '您已经登录,重新登录请退出账户'
  } ) ;
  next ( '/todolist' )
} else {
  next ( )
}