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

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

“只有客户发展了，才有我们的生存与发展！”这是成都创新互联公司的服务宗旨！把网站当作互联网产品，产品思维更注重全局思维、需求分析和迭代思维，在网站建设中就是为了建设一个不仅审美在线，而且实用性极高的网站。创新互联对网站设计制作、网站制作、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。

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之beforeEach非登录不能访问的实现（代码亲测）
网页路径：http://myzitong.com/article/gocejj.html

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

其他资讯