login_push

Vue+Koa2 verwendet JWT , um Single Sign-On zu implementieren ?

---

17.12.2018

Dieses Update README dient hauptsächlich dazu, die unterbrochenen Bildverbindungen auszugleichen.

Aus meiner persönlichen Sicht gefällt mir diese Art von Full-Stack-Projekt sehr. Sie müssen sich meinen Code nicht ansehen, obwohl er auf der Seite sehr einfach aussieht , Es gibt viele Wissenspunkte

• Wie verwende ich jsonwebtoken in der Praxis?
• Steuerung des Single-Sign-On-Routings
• So erstellen Sie koa2 eine Backend-Entwicklungsumgebung, die Sie zufriedenstellt
• Verstehen Sie mongodb , schließen Sie die Einführung ab und verstehen Sie die allgemeine Verwendung der API
• Genau wie das Front-End Vue React und so weiter. Je mehr Sie schreiben, desto kompetenter werden Sie.

Wie funktioniert es?

Erforderliche Umgebung:安装并启动的mongodb (wenn es ein Problem mit der Umgebung gibt, wird es definitiv nicht gestartet)

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

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

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

(Kunde)Kunde:

• vue
• Vue-Router
• Axios
• Element
• jsonwebtoken

(Server)Server

• koa2
• koa-bodyparser
• Koa-Router
• md5
• Mungo
• Uhr2

Welche Funktionen sind implementiert?

• Einloggen
• registrieren
• Abmelden
• Todolist hinzufügen, löschen, ändern, Ansicht
• todolist-Mehrfachauswahlvorgang

JWT-Validierungsmodus

Hier wird das Token in localStorage gespeichert. Eine andere Möglichkeit besteht darin, es in einem Cookie zu speichern. Der Code kann sich jedoch ein wenig ändern, aber der Effekt ist genau derselbe.

Login

Registrierung

todolist

Gedanken zur Routing-Steuerung

 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 } )
}

Über die einheitliche Backend-Verifizierungsschnittstelle /api/verification bestimmt jeder Routing-Sprung, ob das Token abgelaufen ist oder geändert wurde.

Ohne Anmeldung

Wenn das erste Anmeldetoken nicht vorhanden ist, muss das Backend mit 0 antworten und direkt übergeben.

Wenn Sie nicht angemeldet sind, rufen Sie die Seite nach der Anmeldung auf. Wenn Sie nicht angemeldet sind, wird das Token separat abgefragt.

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

Dies bedeutet, dass login bis next() 0 sein muss

Wenn eingeloggt

Das Token existiert bereits und der Typ ist 1. Beim Zugriff auf /todoList , next()

Besuchen Sie /login , geben Sie 1 ein, springen Sie zu /todolist und geben Sie dem Benutzer eine Eingabeaufforderung

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