vue 前端守卫 登录验证权限

页面路由加上标志：

const routes = [
  {
    path: '/user',
    name: 'user',
    meta: {
      title: '个人中心',
      auth: true
    },
    component: () => import(/* webpackChunkName: "user" */ '../pages/user/user.vue')
  }]

auth: true 

下面的路由守卫来判断是否为true，需要验证

false则不需要，直接放行

router.beforeEach((to, from, next) => {
  let token = localStorage.getItem("token");

  // 需要验证权限的页面
  if (to.meta.auth) {
    axios({
      method: 'post',
      url: Vue.prototype.api + '/user/verify',
      params: {
        token: token
      }
    }).then(res => {
      // 获取返回信息判断token是否有效
      if (res.data.flag === true) {
        next();
      } else {
        next("/login")
      }

    });
  } else {
    // 不需要验证页面直接放行
    next();
  }


    }
                 )
export default router

标签：vue,验证,auth,next,守卫,token,user,权限,true
来源： https://www.cnblogs.com/Hello233/p/16330191.html