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

后台的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实例前使用

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