vue_cli3.x 路由拦截

使用 Vue 做项目过程中,发现每个页面的路由都已定义好,不需要访问后端做判断就可以访问,那项目需求是访问页面前需要判断用户是否登录,当用户已登录才能访问,未登录不能访问。网上搜索了好多,都用到了 store 这个东西,不知道是版本问题还是其它,我发现用不了,最后终于找到 sessionStorage 这个可以用,以下做的简单总结,希望遇到同问题的朋友可以参考。

vue_cli3.x 版本实现路由拦截

index.js 路由文件

{
    path: '/changePassword',
    name: 'changePassword',
    meta: {
      requireAuth: true //该路由需要登录才能访问
    },
    component: changePassword
},

main.js 设置路由拦截器

router.beforeEach((to,from,next) => {
  if (to.meta.requireAuth) { //判断前往的界面是否需要登陆
    if (sessionStorage.getItem('hasLogin') === 'true') { // 是否已经登陆
      //已登录
      next();
    } else {
      //未登录,跳转至登录页面
      next({
        path: '/login',
        // query: {redirect: to.fullPath} //将跳转的路由path作为参数,登录成功后跳转该路由
      });
    }
  } else if(to.name === 'login') {
    if(sessionStorage.getItem('hasLogin') === 'true') {
      //已登录
      next({
        path: '/', //跳转首页
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

最后在登录成功和退成成功时,设置hasLogin与其对应就OK了。

sunshine

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!