Vue-router配置权限路由

1.给需要的权限的路由添加标记

 

2.添加全局前置首位

 

 

3.仔细阅读官方文档很有必要！

 

const router =  new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '',
            name: 'home',
            component: Home,
            children: [
                {
                    path: '/gain',
                    name: 'gain',
                    component: Gain,
                    meta: { 
                        requireAuth: true // 添加需要权限的标记
                    }                   
                },
                {
                    path: '/devOps',
                    name: 'devOps',
                    component: DevOps,
                    meta: { 
                        requireAuth: true
                    } 
                }
            ]
        }
    ]
});
router.beforeEach((to, from, next) => {
    const userInfo = getLocalStore('user’); // 读取本地用户信息。自己写的方法！
    if(to.matched.some(res => res.meta.requireAuth)) { // 判读是不是要权限登录
        if (userInfo && userInfo.user && userInfo.token) { // 在去判断当前用户的信息
            next(); // 如果是 直接渲染
        } else {
            next('/login’); // 否则跳转登录页面
        }
    } else {
        next() // 不是就直接去渲染路由
    };
  });