Vue之beforeEach非登录不能访问的实现（代码亲测）

前端  /  管理员 发布于 5年前   483

后台的php请求就是接收这两个参数

login.vue

router

  {   path: '/',   name: 'HelloWorld',   component: HelloWorld,   meta:{requireAuth:true}  },

main.js

router.beforeEach((to, from, next) => { console.log(to); console.log(from); console.log( sessionStorage.getItem('token')) if (to.meta.requireAuth) { // 判断该路由是否需要登录权限  if(sessionStorage.getItem('token')){ //判断sessionStorage是否存在token   alert("已经登录了")   next();  }else{   //防止死循环   alert("暂时未登录")   if (to.path === '/login') {    next();    return   }else{     next({     path: '/login',   }); }  } } else {  next(); } /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/ if(to.fullPath == "/login"){  if(localStorage.getItem('token')){   next({    path:from.fullPath   });  }else {   next();  } }});

注意一定要在router实例前使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• vue router导航守卫（router.beforeEach()）的使用详解
• vue-router beforeEach跳转路由验证用户登录状态
• Vuerouter的beforeEach与afterEach钩子函数的区别
• Vue路由钩子之afterEach beforeEach的区别详解
• 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
• 关于vue-router的beforeEach无限循环的问题解决