login_push

Vue+Koa2 menggunakan jwt untuk mengimplementasikan sistem masuk tunggal ?

---

17-12-2018

Pembaruan README ini terutama untuk memperbaiki koneksi gambar yang rusak.

Dari sudut pandang pribadi saya, saya cukup menyukai proyek full-stack seperti ini. Sangat praktis. Anda tidak perlu melihat kode saya. Anda bisa langsung menulis tugas serupa , Ada banyak poin pengetahuan

• Bagaimana cara menggunakan jsonwebtoken dalam praktiknya?
• Kontrol perutean sistem masuk tunggal
• Cara menggunakan koa2 untuk membangun lingkungan pengembangan backend yang memuaskan Anda
• Pahami mongodb , selesaikan pendahuluan, dan pahami penggunaan API secara umum
• Sama seperti Vue React front-end dan seterusnya. Semakin banyak Anda menulis, Anda akan semakin mahir.

Bagaimana cara kerjanya?

Lingkungan yang diperlukan:安装并启动的mongodb npm (jika ada masalah dengan lingkungan, pasti tidak akan dimulai)

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

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

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

(Klien) klien:

• vue
• vue-router
• aksio
• elemen
• jsonwebtoken

(server)server

• koa2
• koa-bodyparser
• koa-router
• md5
• luwak
• sore2

Fungsi apa yang diterapkan?

• Masuk
• daftar
• Keluar
• todolist tambahkan hapus ubah tampilan
• operasi multi-pilih todolist

mode validasi jwt

Di sini token disimpan di localStorage . Cara lain adalah dengan menyimpannya di cookie. Kodenya mungkin sedikit berubah, tetapi efeknya sama persis.

login

registri

daftar tugas

Pemikiran tentang kontrol perutean

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

Antarmuka verifikasi terpadu backend /api/verification , setiap lompatan perutean menentukan apakah token telah kedaluwarsa atau telah diubah.

Tanpa login

Ketika token login pertama tidak ada, backend harus merespons dengan 0 dan langsung meneruskan.

Jika Anda belum login, buka halaman setelah login. Jika Anda belum login, token akan diminta secara terpisah.

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

Artinya tipe login harus 0, hingga next()

Saat masuk

Token sudah ada dan tipenya adalah 1. Saat mengakses /todoList , next()

Kunjungi /login , ketik 1, lompat ke /todolist , dan berikan perintah kepada pengguna

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