vue路由做权限区分

基本思路

根据登录的权限,动态加入路由,用vue router自带的 addRoutes 方法

基本实现

1. 写一个判断权限方法

import city from "city"
import country from "country"
const permission = (level, isCenter) => {
  if (level == 0 && isCenter) {
    return city;
  } else (level == 1 && isCenter) {
    return country;
  }
};
export default permission;

2. 在获取权限的地方调用方法

import {userInfo} from "@/api"
import permission from "@/util/permission";
//获取权限信息
userInfo(openId).then(res => {
        const level = res.data.DEPT_LEVEL;
        const iscenter = res.data.IS_CENTER;
        const routes = permission(level, iscenter);
        if (Array.isArray(routes)) {
          router.options.routes = routes;
          router.addRoutes(routes);
        }
     });

3. 注意事项

	//如果调用addRoutes 没反应,可以强制修改router里面的options,然后再调用
	router.options.routes = routes;
          router.addRoutes(routes);
    //路由要初始化,不能全部独立出来,至少有一个初始路由
    import routes from "./base";
    const router = new Router({
	  mode: "history",
	  routes,
	  //可以记录上一个页面的位置
	  scrollBehavior(to, from, savedPosition) {
	    if (savedPosition) {
	      return savedPosition;
	    } else {
	      return { x: 0, y: 0 };
	    }
	  }
	});