페이지 vuex 데이터를 새로 고쳐도 사라지지 않고 페이지가 점프하지 않는 문제(자세한 튜토리얼)

이 글에서는 페이지 새로 고침 시 vuex 데이터가 사라지고 페이지가 넘어가는 것을 방지하는 방법에 대한 자세한 설명을 주로 소개하고 참고용으로 올려드립니다.

먼저 이야기하겠습니다

vuex와 경로 차단이 한동안 작업 중이었는데, 드디어 여기서 공유하고 싶습니다. 기본 소개는 없습니다. !!!

본론으로 돌아가기

Refresh

새로고침은 프로젝트를 다시 시작하는 것과 같습니다. 이는 저장소를 통해 사라지며 프로젝트가 닫히면 사라집니다. 이는 컴퓨터를 다시 시작하면 RAM 데이터에 저장되는 것과 비슷합니다. 하지만 세션스토리지, 로컬스토리지, 쿠키에 저장된 콘텐츠는 사라지지 않습니다.

Vuex

방법 및 아이디어

우선 Vuex에 대해 잘 알고 있어야 합니다. Vue.js 애플리케이션용으로 개발되었습니다. 즉, vuex의 저장소에 있는 데이터는 임시이며 일부 변수입니다. 페이지를 새로 고치고 다시 로드하면 모든 것이 지워지고 두 번째 로그인이 발생하지 않습니다. 페이지를 새로 고칠 때 세션 저장소(페이지를 닫으면 사라짐), 로컬 저장소 및 쿠키 데이터가 사라지지 않으므로 요청된 모든 데이터를 저장할 수 있습니다.

2. vuex 플러그인을 사용하세요

3. 로그인 시 토큰 및 로그인 상태(사용자 정의)를 세션 저장소에 할당하고(경로 점프) 토큰 및 로그인 상태를 가져옵니다. 해당 페이지의 데이터를 제가 직접 다시 요청하겠습니다

고민 끝에 방법 3을 선택했는데 이 방법을 라우팅 가로채기와 결합해서 코드를 올려야 합니다. 라우팅이 완료된 후

code

index

actions

// 登录
 Login({ commit, state }, userInfo) {
  return new Promise((resolve, reject) => {
   login(userInfo).then(response => {
    let token = response.data.token;
    commit('SET_TOKEN', token);
    sessionStorage.setItem('token', token);  //获取到新的token的时候赋值给sessionStorage

    commit('SET_ISLOGIN', true);  // 登录成功修改store中的登录状态
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

Routing

간단한 소개: 경로 차단은 경로의 '라이프 사이클'과 동일합니다. 이 기간 동안 수행하려는 작업을 수행합니다. 이번에는 경로가 점프하기 전에만 수행하려면 router.beforeEach((to, from, next) => { // ... }를 사용하세요. ). 공식 홈페이지에는 구체적인 내용이 아주 자세히 나와 있습니다

main.js

router.beforeEach((to, from, next) => {
 let isLogin = sessionStorage.getItem('isLogin');
 let token = sessionStorage.getItem('token');
 let id = sessionStorage.getItem('id');
 if (to.meta.requireAuth) {  // 判断是否有权限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已经在登录页面进入首页的时候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登录进入后刷新页面时
   store.commit('SET_TOKEN', token);
   store.commit('SET_ISLOGIN', isLogin);
   store.commit('SET_ID', id);
   next();
  } else {
   next();
  }
 }
 else {
  next();
 }
});

pit

1. main.js 파일에 경로 차단을 작성했는데 반드시 vue 마운트 위에 작성해야 하므로 주의하세요. (new Vue) 2. 로그인 클릭 시 액션의 로그인 방식은 경로 차단보다 이전이어야 합니다

3 .로그아웃 및 로그인 시 sessionStorage의 변수를 삭제하는 것을 잊지 마세요

위 내용은 제가 컴파일한 내용입니다 모두를 위해. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js를 사용하여 json을 호출하는 방법

GM 자르기를 사용하여 Nodejs에서 이미지를 합성

바벨 설치 및 구성 튜토리얼 사용 방법

위 내용은 페이지 vuex 데이터를 새로 고쳐도 사라지지 않고 페이지가 점프하지 않는 문제(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!