Vue는 사용자가 로그인했는지 확인합니다.

이번에는 사용자의 로그인 여부를 확인하는 Vue에 대해 소개하겠습니다. Vue에서 사용자의 로그인 여부를 확인하는 주의사항은 무엇인가요?

사용자의 로그인 여부를 판단하여 로그인하지 않은 경우 로그인 경로routing

로 점프하고, 로그인한 경우 정상적으로 점프합니다.

一丶먼저 user login 전후에 status를 제공하여 사용자가 로그인했는지 여부를 식별합니다(vuex 권장). 간단하게 vuex를 사용해서 표현하면 공식 홈페이지에 가서 자세히 볼 수 있어요

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex);
var state = {
  isLogin:0,     //初始时候给一个 isLogin=0 表示用户未登录
};
const mutations = {
  changeLogin(state,data){
    state.isLogin = data;
  }
};

둘째: 사용자 로그인 시 로그인 상태 변경;

 this.$store.commit(‘changeLogin‘,‘100‘)   
 //登录后改变登录状态 isLogin = 100 ；

Three; : 핵심은 다음과 같습니다. 경로 항목에 navigation후크를 추가하세요. 구체적인 의미는 코드를 참조하세요.

1: 확인해야 하는 경로 설정

{ path: ‘/admin‘, 
  component: Admin,
  meta:{auth:true} // 设置当前路由需要校验  不需要校验的路由就不用写了；不要问为什么，自己去看官网
  }

2: 경로 점프 및 확인

router.beforeEach((to,from,next) => {   
if(to.matched.some( m => m.meta.auth)){     
// 对路由进行验证     
if(store.state.isLogin==‘100‘) { // 已经登陆       
next()   // 正常跳转到你设置好的页面     
}
else{       
// 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；
       next({path:‘/login‘,query:{ Rurl: to.fullPath} })
      } 
    }else{ 
      next() 
  } 
})

믿습니다. 당신은 이 기사를 읽었습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

위 내용은 Vue는 사용자가 로그인했는지 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!