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

Posted 2020-11-03 南方有梦，远方有止

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

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

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

 

我们在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   ************************