vue 路由拦截问题。设置访问权限无效，是不是姿势不对？

Question

1. 需求 除了登录页面之外，所有页面需要登录才能显示。

2. 实现方式：用户登录成功之后，将用户名存入浏览器缓存中，跳转到home页面，

3. 代码如下：

---

1. router下的index.js

export default new Router({
routes: [

{
  path: "/",
  name: "login",
  component: login
},
{
  path: "/home",
  name: "home",
  component: home,
  meta: {
    requireAuth: true
  },
  children: [
    {
      path: "/readme",
      name: "readme",
      component: readme,
      meta: {
        requireAuth: true
      }
    },
    {
      path: "/form",
      name: "form",
      component: form,
      meta: {
        requireAuth: true
      }
    },
    {
      path: "/table",
      name: "htableome",
      component: table,
      meta: {
        requireAuth: true
      }
    }
  ]
}

]
});

1. main.js中 路由拦截
   // 判断是否需要登录权限 以及是否登录

router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) {

// 判断是否需要登录权限
if (localStorage.getItem("username")) {
  // 判断是否登录
  next();
} else {
  // 没登录则跳转到登录界面
  next({
    path: "/",
    query: { redirect: to.fullPath }
  });
}

} else {

next();

}
});

1. 存在的问题：非登录的情况下 能直接访问到每个菜单！！！

Answer 1

你先确定to.matched.some(res => res.meta.requireAuth)该判断是否能得到你想要的结果，然后未登录直接执行next('/')不太需要query这个参数。