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:{ '$route':function(to,from){ 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() } } } } </script>
위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.
관련 기사:
Node에서 ES6 구문을 사용하는 방법(자세한 튜토리얼)
위 내용은 Vue를 사용하여 로그인 등록 및 토큰 확인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!