How to implement login registration and token verification using vue

In the Vue single page, we can monitor the route object, match the information from it to decide whether to verify the token, and then define subsequent behaviors. The following is an example code to share with you the Vue login registration and token verification functions. Friends who need it can refer to it

In most websites, login registration is achieved by combining local storage cookies, localStorage and request-time verification tokens, etc. technology. For some functional pages, it will try to obtain the token in the local storage for judgment. If it exists, you can enter, otherwise it will jump to the login page or pop up the login box.

In the Vue single page, we can monitor the route object, match the information from it to decide whether to verify the token, and then define subsequent behaviors.

The specific implementation code is as follows:

1. Use the router.beforeEach hook to determine whether the target route carries relevant meta information

// 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 object. The principle is the same as above.

<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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to achieve preview effect in JS

##Use three.js to create a project

How to use ES6 syntax in Node (detailed tutorial)

Detailed introduction to the usage of this object in js

The above is the detailed content of How to implement login registration and token verification using vue. For more information, please follow other related articles on the PHP Chinese website!