Vue 인증 로그인 구현 방법

이번에는 Vue 인증 로그인 구현 방법을 알려드리겠습니다. Vue 인증 로그인의 주의 사항은 무엇인가요? 다음은 실제 사례입니다.

이 프로젝트는 Vue를 개발 프레임워크로 사용합니다. 사용자가 페이지를 탐색할 때 두 가지 상황이 있습니다.

1. 첫 번째는 사용자가 탐색을 계속하기 전에 로그인해야 한다는 것입니다. 로그인 없이 마음대로.

2. 사용자 로그인
이 필요하지 않은 페이지에서는 사용자 정보가 필요한 작업이 있을 수 있습니다. 이 경우 후속 작업을 수행하기 전에 사용자가 로그인해야 합니다. 따라서 인증 로그인 정책은 구별되어야 합니다.

아이디어

1. 일반적으로 우리가 WeChat용으로 개발하는 H5 페이지는 페이지에 들어갈 때 인증이 필요하며 탐색을 계속하기 전에 사용자가 로그인해야 합니다. 그러나 제품 요구 사항으로 인해 이 프로젝트에서는 다양한 페이지의 인증 전략을 나누어 일반 및 특수에 따라 설계해야 합니다. 2. 일반적으로 사용자는 페이지에 들어가자마자 로그인을 승인해야 합니다. 일반 WeChat 인증 프로세스에 따라 로그인하면 로그인 후 사용자는 계속해서 탐색할 수 있습니다.

3. 특별한 경우에는 사용자 로그인이 필요하지 않은 페이지에 대해 화이트리스트를 구성합니다. 화이트리스트에 존재하는

경로

를 입력하고 사용자 로그인

상태

을 감지하는 기능을 입력하지 않고 직접 페이지를 렌더링합니다. 사용자가 로그인하지 않은 상태에서 사용자 정보가 필요한 작업의 경우 현재 이해에 따르면 WeChat 기반의 자동 인증이라 하더라도 페이지를 새로 고쳐야 하며 진정으로 원활한 인증을 달성하고 계속하는 것은 불가능합니다. 사용자의 조작. 따라서 사용자가 인증 프로세스를 이해할 수 있도록 프런트 엔드 수준에서 사용자에게 보다 친숙한 프롬프트를 제공하기로 결정했습니다. 단점은 이전 작업이 인증된 로그인 후에만 트리거된다는 것입니다. 다시 수술.

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        resolve()
        return
       }
      // 常规页面授权登录过程
      if (hasToken()) {
        // codes，获取用户信息并且跳转所需跳转的页面
      } else {
        // 判断用户是否已经进行微信授权
        if (hasAuthed()) {
          // 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
          getWechatAuth()
        }
      }
    }).then( res => {
      next()
    })
  })
  router.afterEach(( to, from ) => {
    wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo})
   })
}

이 프로젝트는 사용자가 처음 WeChat에 바인딩할 때 사용자의 WeChat 정보와 이 사이트의 사용자 정보를 바인딩하는 것입니다. 따라서 사용자의 WeChat 인증 정보를 얻은 후 해당 사용자의 토큰을 얻어 해당 사용자의 다른 사용자를 얻을 수 있습니다. 이 사이트의 정보.

페이지 로그인 없이 권한이 필요한 작업 처리

위 로직에 따라 화이트리스트 입력 후 전체 기능이 반환되었으며, 다음 인증 과정은 들어가지 않습니다. 그러나 해당 페이지에서 권한이 필요한 작업을 수행하는 경우 인증 로그인 프로세스를 실행해야 하며, 인증 후에는 사용자 정보를 함께 얻어야 합니다.

// checkLogin.js
export function checkLogin({ redirectUrl, wxAuthLoading, wxAuthLoaded, callback } = {}) {
  if (getToken()) {
    // ...
    callback && callback()
  } else {
    // 提示用户正在授权中
    wxAuthLoading && wxAuthLoading()
    getWechatAuth( redirectUrl || window.location.href ).then( res => {
      // 授权完毕，提示用户授权成功
      wxAuthLoaded && wxAuthLoaded()
    })
  }
}

동시에 라우팅 화이트리스트에 몇 가지 작업을 추가해야 합니다

// routerRule.js
export default function routerRule (router, whiteList = []) {
  // other codes...
  router.beforeEach( (to, from, next ) => {
    // 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
    new Promise((resolve, rejects) => {
      if ( whiteListRouter.indexOf(to.path) !== -1 ) {
        // 如果已经进行微信授权但是没有token值的，就调用以下函数获取token值
        if ( !hasToken() && hasAuthed() ) {
          getWechatUserInfo().then(res => {
            resolve()
          })
        }
        resolve()
        return
       }
      // 常规页面授权登录过程
      if (hasToken()) {
        // codes，获取用户信息并且跳转所需跳转的页面
      } else {
        // 判断用户是否已经进行微信授权
        if (hasAuthed()) {
          // 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
          getWechatUserInfo().then(res => {
            resolve()
          })
        } else {
          // 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
          getWechatAuth()
        }
      }
    }).then( res => {
      next()
    })
  })
  // other codes...
}

Pits and imperfections

1 이 솔루션에서는 사용자 승인 후 라우팅 점프 전에 사용자를 먼저 얻어야 합니다. 그렇지 않으면 URL의 WeChat 인증 정보가 손실되고 사용자 정보를 얻을 수 없게 됩니다. 2. 이 솔루션의 단점은 개발자가 로그인 없는 페이지에서 모든 권한이 필요한 작업에 대해 checkLogin 판단을 추가해야 한다는 것입니다. 이 권한이 필요한 작업에는 일반적으로 비동기 요청 전송이 포함되므로 불필요한 비동기 요청을 줄이는 것을 고려하지 않는 경우 요청 메서드에 인터셉터를 설정하여 반환된 코드가 다음과 같은 경우 백엔드에서 반환되는 코드를 확인할 수 있습니다. 코드에 로그인하면 WeChat 인증이 수행됩니다. 이 접근 방식은 개발 프로세스에서는 더 편리하지만 사용자가 로그인하지 않은 경우 백엔드에 불필요한 요청을 보내므로 좋지 않습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

PHP에서 배열 중복 제거를 빠르게 구현하는 방법

JS 콜백 함수 사용 사례에 대한 자세한 설명

위 내용은 Vue 인증 로그인 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!