Vue 路由守卫全局前置守卫代码解析 - 权限控制和页面标题设置

这段代码是 Vue 路由守卫中的全局前置守卫函数。在每次路由切换之前，该函数会被执行。

首先，函数通过document.title设置了网页的标题，标题由to.meta.title和固定的字符串' | vue-manage-system'组成。to是即将进入的路由对象，to.meta.title是该路由的元信息中定义的标题。

接下来，函数通过localStorage.getItem('ms_username')获取了一个名为ms_username的本地存储项的值，并将其赋值给变量role。这个本地存储项保存了用户的角色信息。

然后，函数进行了一系列条件判断：

1. 如果role为空且即将进入的路由不是登录页面/login，则通过next('/login')将路由重定向到登录页面。

2. 如果即将进入的路由的元信息中定义了permission属性（即该路由需要权限控制），则进一步判断用户的角色：

   • 如果用户角色是管理员（role === 'admin'），则通过next()放行进入该路由。

   • 如果用户角色不是管理员，则通过next('/403')将路由重定向到403页面，表示没有权限访问。

3. 如果即将进入的路由不需要权限控制，则直接通过next()放行进入该路由。

总之，这段代码的作用是在每次路由切换之前，根据用户的角色信息和路由的权限要求进行判断，决定是否放行进入路由或进行重定向操作。