vue를 사용하여 로그인 확인을 구현하는 방법

이번에 알려드릴 가장 중요한 것은 vue를 사용하여 로그인 확인을 구현하는 방법입니다. 로그인 문제는 처음에는 고려하지 않았는데 나중에 추가했습니다. 일부 사람들이 공유한 로그인을 읽은 후 정말 대단하다고 느꼈습니다. 이 기사에서 자세한 분석을 제공하겠습니다.

사용된 기술:

vue

vue-router

vuex

우선, vue는 페이지 작성을 위한 프레임워크임이 분명합니다. 과거에는 로그인을 할 때 백엔드가 로그인 상태를 제어했을 수도 있습니다. 로그인 정보는 cookie에 저장됩니다. 프런트 엔드에서는 로그인 확인도 수행할 수 있는데, 이는 주로 페이지에 라우팅을 도입하는 기능을 기반으로 구현됩니다.

각각 전에 vue-router에 후크기능이 있습니다. (내비게이션 가드) 이름이 너무 횡포해서 YY라는 이름은 내 집이니까 내 초대권이 없으면 나가서 창 선생님을 보러 오세요. beforeEach는 세 가지 매개변수(to, from, 다음) 가는 곳: 그 남자가 가는 곳, 출발: 그 남자가 가는 곳, 다음: 아름다운 아가씨 들어오세요. 미끄러운 길 조심하세요. 지금으로서는 내가 쓴 내용이 매우 생생하다고 생각하실 것입니다. 불만족스러우면 문서를 읽어 보십시오. 아!

각각 전에 이해해야 사물을 구별할 수 있습니다. 기본 아이디어는 다음과 같습니다.

라우터의 정보에서 메타 사용자의 소스 정보를 얻고 싶습니다. 그렇지 않은 경우 이 패자를 떠나서 더 멋진 방식으로(즉, 로그인) 돌아오도록 하십시오.

없으면 소스 정보는 igeekbar로 이동하세요. 와서 스커트를 보고 입장권을 받으세요(즉, 로그인 후 반환 결과를 받아 후속 루트 점프 확인을 위해 라우터의 소스 정보에 저장합니다)

이 글을 쓰면서 문득 느꼈습니다. 아, 너무 많이 쓰는 것에 대해 걱정하지 말고 그냥 초보자라고 생각하세요(하하하)

코드는 바로 아래에 있습니다:

router.js 경로에 코드를 추가하세요

// router.js
router.beforeEach((to, from, next) => {
 if (!to.meta.user) {
  // todo 请求接口获取数据
  loadUserData().then(user => {
   // 存放源信息
   to.meta.user = user
   // 存在 vuex 中
   store.state.user = user
   if(user){
    next()
   }else{
    next({
     path: '/'
    })
   }
  })
 } else {
  next()
 }
})

통합 처리 인터페이스의 파일 api. js

// api.js
import axios from 'axios'
  
// 封装ajax 的 fetch
export let fetch = (method, url, data, forceLogin = true) => {
 return new Promise((resolve, reject) => {
  axios({
   ...data,
   method: method,
   url: url
  }).then(response => {
   resolve(response.data)
  }).catch(err => {
   reject(err)
  })
 })
}
// 获取用户信息
export let loadUserData = () => {
 return new Promise((resolve, reject) => {
  let user = null
  let cacheKey = 'authUserJsonStr'
  let authUserJsonStr = sessionStorage.getItem(cacheKey)
  if (authUserJsonStr) {
   user = JSON.parse(sessionStorage.getItem(cacheKey))
   resolve(user)
  } else {
   fetch('GET', '/api/auth_info/', {}, false).then((data) => {
    user = data
    sessionStorage.setItem(cacheKey, JSON.stringify(user))
    resolve(user)
   }).catch(() => {
    resolve(null)
   })
  }
 })
}

위 소개를 읽으신 후 방법을 마스터하셨다면 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트기타 관련 기사를 주목하세요!

관련 읽기:

JS의 버블링 이벤트를 사용하는 방법

JS에서 클래스 속성을 사용하는 방법

네이티브 JS에서 AJAX 및 JSONP를 구현하는 방법

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