login_push 다운로드 - login_push 소스 코드 다운로드

login_push

기타 카테고리

1.0.0

다운로드

Vue+Koa2는 jwt를 사용하여 Single Sign-On을 구현합니까 ?

2018-12-17

README 이번 업데이트는 주로 끊어진 그림 연결을 보완하기 위한 것입니다.

내 개인적인 관점에서는 이런 종류의 풀스택 프로젝트가 매우 실용적이며, 페이지에서 보면 매우 간단해 보이지만 내 코드를 직접 볼 필요는 없습니다. , 지식 포인트가 많습니다

실제로 jsonwebtoken을 어떻게 사용하나요?
Single Sign-On 라우팅 제어
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

(클라이언트)클라이언트:

뷰
뷰 라우터
액시오스
요소
jsonwebtoken

(서버)서버

코아2
코아 바디 파서
코아 라우터
MD5
몽구스
오후 2시

어떤 기능이 구현되나요?

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 방문하여 is 1을 입력하고 /todolist 로 이동한 후 사용자에게 프롬프트를 표시합니다.

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