Vue 경로가 점프할 때 사용자가 로그인했는지 확인-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-01-02 13:54:02

원래의

3154명이 탐색했습니다.

사용자의 로그인 여부를 판단하여 로그인되어 있지 않으면 로그인 경로로 점프하고, 로그인되어 있으면 정상적으로 점프합니다. 이 기사에서는 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() 
　　} 
})

로그인 후 복사

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