Vue를 사용하여 로그인 등록 및 토큰 확인을 구현하는 방법

Vue 단일 페이지에서 경로 개체를 모니터링하고 해당 정보를 일치시켜 토큰 확인 여부를 결정한 다음 후속 동작을 정의할 수 있습니다. 다음은 Vue 로그인 등록 및 토큰 확인 기능을 공유하기 위한 예제 코드입니다. 필요한 친구가 참고할 수 있습니다.

대부분의 웹사이트에서 로그인 및 등록은 로컬 저장소 쿠키, localStorage 및 요청 시간 확인을 결합하여 구현됩니다. 토큰 및 기타 기술. 일부 기능 페이지의 경우 판단을 위해 로컬 저장소에서 토큰을 얻으려고 시도합니다. 토큰이 있으면 들어갈 수 있고, 그렇지 않으면 로그인 페이지로 이동하거나 로그인 상자가 팝업됩니다.

Vue 단일 페이지에서 경로 개체를 모니터링하고 해당 정보를 일치시켜 토큰 확인 여부를 결정한 다음 후속 동작을 정의할 수 있습니다.

구체적인 구현 코드는 다음과 같습니다.

1. router.beforeEach 후크를 사용하여 대상 경로가 관련 메타 정보를 전달하는지 확인합니다.

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
 {
  path: '/',
  component: require('./views/Home'),
  meta: {
   requiresAuth: true
  }
 },
]
const router = new VueRouter({
 routes: routes
})
router.beforeEach((to, from, next) => {
 let token = window.localStorage.getItem('token') 
 if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
  next({
   path: '/login',
   query: { redirect: to.fullPath }
  })
 } else {
  next()
 }
})
export default router

2. 원리는 위와 동일합니다.

<script>
  // App.vue
  export default {
    watch:{
      &#39;$route&#39;:function(to,from){
        let token = window.localStorage.getItem(&#39;token&#39;);
　　　　　　　　  if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
　　　　　　　　　　  next({
 　　　　　　　　　　  path: &#39;/login&#39;,
 　　　　　　　　　　  query: { redirect: to.fullPath }
　　　　　　　　　　  })
　　　　　　　　  } else {
　　　　　　     next()
　　　　　　　　  }
   　　　}
  　　}
  }
</script>

위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JS에서 미리보기 효과를 얻는 방법

3.js를 사용하여 프로젝트 만들기

Node에서 ES6 구문을 사용하는 방법(자세한 튜토리얼)

자세한 소개 js 개체 사용법

위 내용은 Vue를 사용하여 로그인 등록 및 토큰 확인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!