페이지 새로 고침 vuex 데이터 가 사라 지지 않 고 페이지 를 뛰 지 않 는 해결

뭐 공부 해요?
vuex 와 경로 가 이 장 구 를 차단 한 지 오래 되 었 습 니 다.드디어 기어 나 왔 습 니 다.특별히 공유 하 겠 습 니 다.먼저 기본 적 인 소개 가 없다 고 밝 히 고 로그 인 상태 로 session Storage 를 저장 하 는 방법 을 사용 합 니 다!!
본론 으로 들어가다
새로 고침
새로 고침 은 프로젝트 를 다시 시작 하 는 것 과 같 습 니 다.이전에 얻 은 데이터 도 store 를 통 해 잠시 저장 되 었 을 뿐 프로젝트 가 닫 혔 을 때 보이 지 않 습 니 다.이것 은 컴퓨터 가 다시 시작 하면 RAM 에 저 장 된 데이터 가 사라 집 니 다.그러나 session storage,localstorage,쿠키 에 저 장 된 내용 은 사라 지지 않 습 니 다.
Vuex
방법 적 사고방식
먼저 vuex 를 숙지 해 야 합 니 다.홈 페이지 에서 Vuex 는 Vue.js 응용 프로그램 을 위 한 상태 관리 모델 입 니 다.즉,vuex 의 store 에 있 는 데 이 터 는 모두 임시 적 이 고 일부 변수 입 니 다.페이지 새로 고침 을 다시 불 러 오고 모든 것 이 비 워 졌 습 니 다.또한 페이지 에서 두 번 의 로그 인 을 하지 않 았 습 니 다.vuex 에서 계속 비어 있 기 때문에 몇 가지 방법 이 생 겼 습 니 다.
1.session storage(페이지 를 닫 으 면 사라 집 니 다),localstorage,cookie 새로 고침 페이지 데이터 가 사라 지지 않 기 때문에 요청 한 모든 데 이 터 를 안에 저장 하고 사용 할 때 다시 가 져 올 수 있 습 니 다.
2.vuex 플러그 인 사용
3.로그 인 할 때 token 과 로그 인 상태(사용자 정의)를 session storage 에 할당 합 니 다.페이지 를 새로 고 칠 때(경로 이동)session storage 에서 token 과 로그 인 상태 할당 을 store 에 가 져 오 면 해당 페이지 의 데 이 터 를 다시 요청 합 니 다.
내 가 생각 한 후에 나 는 방법 3 을 선택 했다.다만 이 방법 은 경로 차단 과 결합 해 야 하고 뒤의 경로 가 끝나 면 함께 코드 를 붙 여야 한다.
코드
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)
   })
  })
 },

경로
간단 한 소개:경로 차단 은 경로 의'수명 주기'에 해당 합 니 다.경로 의 서로 다른 시간 대 에 방법 을 삽입 하면 이 시간 대 에 무슨 일 을 하고 싶 은 지,이번 에는 경로 전환 전에 만 일 을 하기 때문에 router.beforeach((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();
 }
});

구덩이.
1.경로 차단 은 main.js 파일 에 적 혀 있 습 니 다.vue 마 운 트 위 에 꼭 쓰 십시오(new Vue)
2.로그 인 을 클릭 할 때 actions 의 로그 인 방법 은 경로 차단 보다 빠 릅 니 다.
3.로그 인 을 종료 할 때 sessionStorage 의 변 수 를 삭제 하 는 것 을 잊 지 마 세 요.
마지막 으로 뭐 좀 더 할 게 요.
본 논문 이 당신 에 게 도움 을 줄 수 있 기 를 바 랍 니 다.이것 은 제 가 가장 기 쁜 것 입 니 다.제 가 잘못 썼 거나 문제 가 있다 고 생각 하 는 부분 도 지적 해 주세요.여러분 들 이 서로 도와 주 고 발전 하 세 요!!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.