在vue單頁中,我們可以透過監控route對象,從中匹配資訊去決定是否要驗證token,然後定義後續行為。以下透過實例程式碼給大家分享vue登入註冊及token驗證功能,需要的朋友參考下吧
在大多數網站中,實現登入註冊都是結合本地儲存cookie、localStorage和請求時驗證token等技術。而對於某些功能頁面,會嘗試取得本機儲存中的token進行判斷,存在則可進入,否則跳到登入頁或彈出登入框。
而在vue單頁中,我們可以透過監控route對象,從中匹配資訊去決定是否要驗證token,然後定義後續行為。
具體實作程式碼如下:
1. 利用router.beforeEach鉤子, 判斷目標路由是否攜帶了相關meta資訊
// 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. watch route物件。原理同上。
<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>
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
以上是使用vue如何實現登入註冊及token驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!