login_push

Vue+Koa2 ใช้ jwt เพื่อใช้งาน single sign-on ?

---

17-12-2018

การอัปเดต README นี้มีไว้เพื่อชดเชยการเชื่อมต่อรูปภาพที่เสียหายเป็นหลัก

จากมุมมองส่วนตัวของฉัน ฉันค่อนข้างชอบโปรเจ็กต์แบบฟูลสแต็กนี้ คุณไม่จำเป็นต้องดูโค้ดของฉันโดยตรง แต่คุณสามารถเขียนสิ่งที่ต้องทำที่คล้ายกันได้โดยตรง ,มีจุดให้ความรู้มากมาย

• จะใช้ jsonwebtoken ในทางปฏิบัติได้อย่างไร?
• การควบคุมการกำหนดเส้นทางการลงชื่อเข้าระบบครั้งเดียว
• วิธีใช้ koa2 เพื่อสร้างสภาพแวดล้อมการพัฒนาแบ็กเอนด์ที่ตรงใจคุณ
• ทำความเข้าใจ mongodb กรอกข้อมูลเบื้องต้น และทำความเข้าใจการใช้งานทั่วไปของ API
• เช่นเดียวกับ front-end Vue React และอื่นๆ ยิ่งคุณเขียนมากเท่าไร คุณก็จะยิ่งเชี่ยวชาญมากขึ้นเท่านั้น

มันทำงานอย่างไร?

สภาพแวดล้อมที่ต้องการ:安装并启动的mongodb npm (หากมีปัญหากับสภาพแวดล้อม จะไม่เริ่มทำงานอย่างแน่นอน)

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

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

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

(ลูกค้า)ลูกค้า:

• วิว
• vue-เราเตอร์
• axios
• องค์ประกอบ
• jsonwebtoken

(เซิร์ฟเวอร์)เซิร์ฟเวอร์

• โคอา2
• koa-bodyparser
• koa-เราเตอร์
• md5
• พังพอน
• pm2

มีการใช้งานฟังก์ชั่นอะไรบ้าง?

• เข้าสู่ระบบ
• ลงทะเบียน
• ออกจากระบบ
• รายการสิ่งที่ต้องทำ เพิ่ม ลบ แก้ไข มุมมอง
• 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' )
        }

ซึ่งหมายความว่าประเภท login ต้องเป็น 0 ถึง next()

เมื่อเข้าสู่ระบบแล้ว

มีโทเค็นอยู่แล้วและพิมพ์เป็น 1 เมื่อเข้าถึง /todoList next()

ไปที่ /login พิมพ์ 1 ข้ามไปที่ /todolist และแจ้งให้ผู้ใช้ทราบ

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