20190703——他山之石可以攻玉导航守卫-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36344771/article/details/94555421

本文介绍如何在Vue项目中修改端口配置，实现在同一IDE下编译多个项目，并详细解析了Vue Router的导航守卫功能，实现基于sessionStorage的权限控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改vue的端口号

在config下面的index.js中调制port的数值，以此来更改端口号。

在同一个webstorm中编译两个项目

File－> Settings －> Directories －> Add Content Root，选择你要加入的Project 点击OK －> Apply －> OK 搞定。

阶段小结
目前routes.js路由的跳转已经完毕。

导航守卫

导航就是我们说的路由，当路由发生变化的时候，我们想要做的事情，这就是导航守卫的重点。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

to,from,next三个参数都是必要的to: 即将要进入的目标路由对象from: 当前导航正要离开的路由next：一定要调用该方法来 resolve 这个钩子，如果不写next()或者next(false)，页面路由不会跳转，也就是页面被阻止在当前页面了to,from是一个对象，就是routes[] 数组里面配置的某个具体的路由对象，
很简单的应用。

router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    sessionStorage.removeItem('user')
  }
  let user = JSON.parse(sessionStorage.getItem('user'))
  if (!user && to.path !== '/') {
    next({ path: '/' })
  } else {
    next()
  }
})

代码如下，在我们项目中，我的首页就是登陆页面。也就是’/'的路径，所以每次进行一次判断。然后这样就相当于权限限制了路由。