vue路由元之进入路由需要用户登录权限功能

为什么需要路由元呢???

  博猪最近开发刚刚好遇到一个情况,就是有个路由页面里面包含了客户的信息,客户想进这个路由页面的话,

就可以通过请求数据获取该信息,但是如果客户没有登录的话,是不能进到该页面的,于是我们就用到路由元了。

我们在router.js里面配置:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: {unLogin: true}  //这里配置meta作为标识,unLogin为true的话,就需要用户的登录权限
    }
  ]
})
router.beforeEach((to, from, next) => {
    if (!to.meta.unLogin) {  // 判断该路由是否需要登录权限
        if (localStorage.getItem('userMsg')) {  //localStorage.getItem('userMsg')是登录后本地保存登录的信息,只有已登录才有
            next();
        }
        else {
            next({
                path: '/user/login',
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
            })
        }
    }
    else {
        next();
    }
});

OK,以上就是路由元的使用方法。

************************   END   ************************

原文地址:https://www.cnblogs.com/silent007/p/9004088.html