Vue WeChat 인증 로그인에서 프런트엔드와 백엔드 분리 문제를 해결하는 방법

이 글은 주로 Vue WeChat 인증 로그인의 프런트엔드와 백엔드를 분리하는 상세하고 우아한 솔루션을 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

WeChat 인증 로그인은 매우 일반적인 시나리오입니다. WeChat 인증 로그인을 사용하면 사용자의 일부 정보를 쉽게 얻을 수 있으며 공식 계정에 대한 사용자 고유의 openid를 통해 사용자의 신원을 연결하는 데이터베이스를 구축할 수 있습니다. 로그인 메커니즘은 여기서 자세히 설명하지 않습니다. WeChat 공식 문서에 이미 자세히 설명되어 있습니다. 사용자가 확인을 클릭하면 WeChat이 콜백 페이지로 이동합니다. 콜백 페이지 URL은 code 매개변수를 전달하며, 백엔드는 openid 또는 사용자 정보를 지원하는 대가로 코드를 사용할 수 있습니다.

vue 프로젝트에서는 일반적으로 SPA 애플리케이션입니다. 즉, 모든 페이지는 동일한 HTML입니다. 일반적으로 현재 개발에서는 프런트엔드와 프런트엔드가 완전히 분리되어 있으며, vue는 나중에 생성되는 순수 정적 파일도 서버를 통과할 수 없기 때문에 백엔드를 통과하는 것이 그다지 우아하지 않습니다. 기사에서는 이러한 시나리오에서 WeChat 인증 로그인을 소개합니다

Vue SPA 애플리케이션의 경우 일반적으로 WeChat 공식 계정에는 여러 메뉴가 Vue의 라우팅 페이지에 해당하도록 구성될 수 있습니다. 모든 페이지에 사용자 인증이 필요한 것은 아닙니다. 일부 페이지는 로그인하지 않고도 사용자가 미리 볼 수 있습니다. 이때 vue 라우터를 사용하여 프런트엔드 경로 차단을 구현할 수 있습니다.

 router.beforeEach(async (to, from, next) => {
 if (to.matched.some(recode => recode.meta.noAuth)) {
  next()
 } else {
  // store已存在用户信息直接进入页面
  if (store.state.userInfo.nickname) {
   next()
   return
  }
  const code = getUrl(window.location.href).code // 截取url上的code ,可能没有,则返回''空字符串
  let res = await api.post('/imsl/user/user-auth', [code]) // 获取用户信息,后端可首先通过cookie,session等判断,没有信息则通过code获取
  console.log(res)
  // 返回用户信息
  if (res.code === 200 && res.data.is_auth) {
   store.commit('setUserInfo', res.data)
   next()
  } else {
   // 此状态根据业务需求 可能不存在
   if (res.code === 201) {
    const openid = res.data.openid
    console.log(openid)
    store.commit('setOpenid', openid)
    localStorage.setItem('openid', openid)
    next('/enlist-info')
   }
   // 上面的获取用户信息接口,如果cookie,session拿不到用户信息,且传递的code为空,则跳转到微信授权页面
   if (res.code === 202) {
    console.log(window.location.origin)
    console.log(to.fullPath)
    // 这个redirectUrl用 当前页路径或者tof.fullPath(将要进入的路径)
    let redirectUrl = window.location.href
    redirectUrl = encodeURIComponent(redirectUrl)
    console.log(redirectUrl)
    const appid='wxdff0642c2120ea39'
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
   }
  }
 }
})

위 코드는 기본적으로 인증 프로세스를 설명합니다. 먼저 vue 라우팅을 구성할 때 이 경로에 로그인이 필요한지 여부를 설정합니다. 즉, 라우터의 메타에 noAuth를 추가합니다: true 속성은 로그인이 필요하지 않은 페이지를 처리하는 데 사용됩니다. router.beforeEach를 통해 판단됩니다. 로그인이 필요하지 않은 페이지인 경우: noAuth, 직접 해당 페이지로 들어가도록 합니다. 로그인이 필요한 페이지의 경우 이 때 백엔드는 사용자 정보를 얻기 위한 인터페이스를 작성하고, 프런트엔드는 사용자 정보를 얻기 위해 인터페이스를 직접 호출할 필요는 없으며, 한 번 얻은 후 사용자 정보를 vuex에 저장할 수 있으므로 사용자 정보가 있는지 확인합니다. 정보가 이미 존재하는 경우 페이지에 들어가고, 사용자 정보가 없으면 백엔드 인터페이스를 호출하여 사용자 정보를 얻습니다. 이 시점에서 마지막으로 사용자 정보는 WeChat을 통해 인증됩니다. 이때 백엔드는 어떻게 사용자 정보를 얻나요? 여기서 사용자가 자신의 ID를 바인딩한 후 백엔드는 쿠키, 토큰 등을 설정하여 사용자의 로그인 상태를 저장할 수 있습니다. 관련 상태가 있으면 백엔드가 사용자 정보를 직접 반환할 수 있습니다. 처음 입력하거나 쿠키, 토큰 등이 만료된 경우 위 코드에서 언급한 것처럼 WeChat이 호출되어 로그인을 승인합니다. 세 가지 상황,

1. 백엔드는 쿠키, 토큰 등을 통해 사용자 정보를 직접 가져옵니다. 이때 사용자 정보를 직접 가져오고 동시에 사용자 정보는 다음과 같습니다.

2. 현재로서는 쿠키나 토큰이 없으므로 위에 제공된 두 개의 반환 코드는 code=201입니다. 202. code=2인 경우 프런트 엔드는 WeChat 인증 페이지로 직접 이동하고, 리디렉션Uri는 현재 입력하려는 페이지입니다. 그러면 WeChat 인증 페이지로 이동하고 사용자가 돌아오게 됩니다. 차이점은 현재 URL이 이미 코드를 전달하고 있으며 문자열 가로채기를 통해 코드를 가져와 백엔드로 보낼 수 있다는 것입니다.

요약:

이 프로젝트는 프론트엔드와 백엔드의 완전한 분리 방식을 채택합니다. 즉, 패키징 후 제공됩니다. 순수한 정적 파일은 액세스할 때 배치됩니다. index.html

1. 백엔드는 WeChat 인증 로그인 페이지로 점프할 필요가 없습니다. 구현 방법은 다음과 같습니다. .

2. 프론트 엔드는 라우터를 통해 진입하기 위해 사용자 ID가 필요한 페이지를 차단합니다.beforeEach vue-router의 후크 기능 이 때 백엔드는 먼저 사용자 정보를 획득하여 사용자를 결정합니다. 쿠키, 토큰 등을 반환하고 관련 정보가 없으면 201 또는 202를 반환합니다. 202를 반환하면 프런트 엔드는 WeChat 인증 페이지로 점프합니다. 리디렉션은 점프 인증 후 입력할 페이지의 URL입니다. WeChat은 URL에 있는 코드를 가지고 현재 페이지로 돌아갑니다. 이때 프런트 엔드는 URL의 코드를 가로채서 백엔드로 전달합니다. 결국 백엔드는 코드 처리를 통해 사용자 정보를 얻습니다. back end, openid 등이 인증된 로그인을 구현합니다

3. 위 내용은 모두의 학습에 도움이 되기를 바랍니다.

관련 권장사항:

Vue에서 기록 모드 패키징 라우팅 후 빈 페이지 문제를 해결하는 방법

Vue에서 $refs 사용

vue 및 vue-validator 양식 확인 구현 정보 기능

위 내용은 Vue WeChat 인증 로그인에서 프런트엔드와 백엔드 분리 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!