이번에는 사용자의 로그인 여부를 확인하는 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} // 设置当前路由需要校验 不需要校验的路由就不用写了；不要问为什么，自己去看官网
}로그인 후 복사
믿습니다. 당신은 이 기사를 읽었습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 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()
}
})로그인 후 복사
위 내용은 Vue는 사용자가 로그인했는지 확인합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
