login_push

Vue+Koa2使用jwt實作單一登入?

---

2018-12-17

本次更新README主要是把掛掉的圖連接補上

從我個人角度來說,我還是蠻喜歡這樣的全棧項目的,實踐性很足,不一定要看我的代碼,完全可以直接去寫一個類似的todo,雖然頁面上看起來很簡單,但是存在著許多知識點

• jsonwebtoken如何實際運用?
• 單一登入路由的控制
• 如何使用koa2出一個讓自己滿意的後台開發環境
• 了解mongodb ,完成入門,了解大致api的使用
• 前端Vue React等等自己喜歡就好,寫的多了,自然會越來越熟練

怎麼運行?

需要環境: npm安装并启动的mongodb (環境有問題是肯定啟動不起來的)

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

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

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

(客戶端)client:

• vue
• vue-router
• axios
• element
• jsonwebtoken

(服務端)server

• koa2
• koa-bodyparser
• koa-router
• md5
• mongoose
• pm2

實現了什麼功能?

• 登入
• 註冊
• 註銷
• todolist增加刪除修改查看
• todolist多選操作

jwt驗證模式

這裡token儲存在localStorage裡面,還有一種做法是存出來cookice裡面,程式碼可能有點變化,但是效果是一模一樣的

login

registry

todolist

關於路由控制的思路

 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 ,每次路由跳轉都判斷token是不是過期或是被改動

沒有登入的情況下

當第一次登入token不存在則肯定後端對應0 直接透過

沒有登入的情況下,去造訪登入後的頁面,沒登入, token分別提示

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

這又到login type肯定為0, 通過next()

登入的情況下

token已經存在,type為1,在訪問/todoList的情況下, next()

存取/login ,type為1,跳到/todolist ,同時給使用者一個提示

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