在vue中怎么实现token的验证实现路由守卫

在Vue中实现Token验证的路由守卫，可以通过以下步骤：

1. 安装 `vue-router` 插件（如果还没有安装），可以使用以下命令：

   npm install vue-router --save

2. 创建一个 `router` 实例，并定义路由守卫：

   import Vue from 'vue'
   import Router from 'vue-router'
   
   Vue.use(Router)
   
   const router = new Router({
     routes: [
       // 定义路由
       // ...
     ]
   })
   
   // 定义路由守卫
   router.beforeEach((to, from, next) => {
     const token = localStorage.getItem('token')
   
     if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
       if (token) { // 判断是否已经登录
         next()
       } else { // 没有登录，跳转到登录页面
         next({
           path: '/login',
           query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
         })
       }
     } else {
       next()
     }
   })
   
   export default router

在上面的代码中，我们通过 `router.beforeEach` 定义了全局路由守卫，每次路由跳转前都会执行该守卫。在守卫中，我们首先获取保存在 localStorage 中的 token 值，然后判断路由是否需要登录权限，如果需要，则判断 token 是否存在，如果存在则继续跳转，否则跳转到登录页面。如果路由不需要登录权限，则直接跳转。

3. 在需要验证的路由中添加 `meta` 属性：

   const router = new Router({
     routes: [
       {
         path: '/home',
         component: Home,
         meta: { requireAuth: true } // 需要登录权限
       },
       // ...
     ]
   })

在上面的代码中，我们为 `/home` 路由添加了 `meta` 属性，并将其设置为需要登录权限。

4. 在登录成功后，保存 token 值：

   localStorage.setItem('token', token)

在上面的代码中，我们使用 `localStorage.setItem` 方法将 token 值保存在本地。

通过上面的步骤，我们就可以实现基于 Token 的路由守卫验证。每次路由跳转前，都会判断用户是否已经登录，如果没有登录，则跳转到登录页面。如果已经登录，则继续跳转到目标路由。