Vue 경로가 점프할 때 사용자가 로그인했는지 확인

사용자의 로그인 여부를 판단하여 로그인되어 있지 않으면 로그인 경로로 점프하고, 로그인되어 있으면 정상적으로 점프합니다. 이 기사에서는 Vue 라우팅이 점프할 때 사용자가 로그인했는지 여부를 확인하는 기능의 구현을 주로 설명합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

One: 먼저 사용자가 로그인했는지 여부를 식별하기 위해 로그인 전후에 상태를 제공합니다. (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 ；

세 번째가 핵심입니다.

경로 항목에 탐색 후크를 추가하세요. 특정 의미에 대한 코드

확인이 필요한 경로 설정

{ 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()
　　}
})

모두 익히셨나요? 그것이 모두에게 도움이 되기를 바랍니다.

관련 권장 사항:

휴대폰 번호 인증된 사용자 로그인 기능을 얻기 위해 WeChat 애플릿을 설명하는 예

Thinkphp 인증 코드 로그인 기능 구현 예

ThinkPHP의 로그인 및 로그아웃 기능 코드 구현 상세 설명

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