页面权限是对用户角色的校验
应用场景
需要通过用户角色来评定某些页面是否被展示时
同一系统，财务登录只能看看财务报表的页面，仓库的只能打开出入库页面
实现思路
当用户登录成功之后,通过接口返回值得知用户信息和可访问页面列表.只需要按照用户的权限列表给他相应的访问权限从而达到目的.
具体实现
登录成功之后,得到如下数据：
{
user_id:001,
user_name:"张豆豆",
user_permission:["List","Detail","Manage"]
}
通过接口的返回值可知,张豆豆能访问list、detail以及manage页面，
将路由分为静态路由及动态路由
静态路由：所有
角色都能访问，主要区分登录访问和非登录访问.（tip：处理的逻辑见上文,前端权限——登陆权限
动态路由：根据角色定制的页面，主要区分不同角色。
//静态路由
export const routes = [
{
path: '/login', //登录页面
name: 'Login',
component: Login,
},
{
path:"/myCenter", // 个人中心
name:"MyCenter",
component: MyCenter,
meta:{
need_login:true //需要登录
}
},
{
path:"/", // 首页
name:"Home",
component: Home,
}
]
//动态路由
export const dynamic_routes = [
{
path:"/list", // 列表页
name:"List",
component: List
},
{
path:"/detail", // 详情页
name:"Detail",
component: Detail
},
{
path:"/manage", // 内容管理页
name:"Manage",
component: Manage
},
{
path:"/admin", // 人员管理页
name:"Admin",
component: Admin
}
]
用户登录成功后,动态添加路由信息
一般会将登录成功后将接口信息存到vuex和localStorage里面..
import store from "@/store";
export const routes = [...略，格式如上]; //所有静态路由
export const dynamic_routes = [...略，格式如上]; //所有动态路由
//创建路由对象
const router = createRouter({
history: createWebHashHistory(),//带#号的路由
routes,
});
//动态添加路由
if(store.state.user != null){ //用户已经登录
//从vuex中拿到用户权限信息
const { user_permission } = store.state.user; // 从用户信息中获取权限列表
const allow_routes = dynamic_routes.filter((route)=>//过滤该用户允许访问的路由信息
{
return user_permission.includes(route.name);
})
allow_routes.forEach((route)=>{ //将允许访问的路由动态添加到路由栈中
router.addRoute(route);
})
}
export default router;
在动态添加路由的过程中，如果有 404 页面，一定要放在最后添加，否则在登陆的时候添加完页面会重定向到 404 页面。 ok~~ 关于页面权限大致就是这个思路,代码逻辑也大致如此，具体用户信息存在那儿，怎么获取用户信息，路由配置还需要有什么其他的配置项，根据实际项目修改补充即可！
知识点
router.addRoute
vue-router 4 提供的的api,每一次只能添加一个路由信息,所以要将
allow_routes遍历循环添加.
router.addRoute另一种用法——添加嵌套子路由
接受两个参数,第一个参数对应父路由的name属性,第二个参数是要添加的子路由信息.如下：
createRouter
上面代码采用的是hash模式
