이번에 알려드릴 가장 중요한 것은 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에서 AJAX 및 JSONP를 구현하는 방법
위 내용은 vue를 사용하여 로그인 확인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!