需求:有些页面不需要登录可以直接访问(首页,首页详情等),有些页面必须登录才可以访问(个人信息),需要在登录后返回原本的页面

router.js
设置 ‘requireAuth’ 为需要权限查看的页面

{
    path: '/order',
    name: 'order',
    component: () => import('@/pages/order.vue'),
    meta: {
        requireAuth: true
    }
},

main.js

router.beforeEach((to, from, next) => {
    var projectData = JSON.parse(localStorage.getItem('projectData')) || {};

    const token = projectData.token;

    if (to.meta.requireAuth) {
        if (token) {  //  当前的token是否存在
            next();
        } else {
            next({
                path: '/login',
                query: { redirect: to.fullPath }  // 将跳转的路由path作为参数,登录成功后跳转到该路由
            })
        }
    } else {
        next()
    }
})

ps:有些页面在登录后是不需要跳回的,而是应该跳到首页的,比如从注册到登录,登录之后不是回到注册页,而是跳转到首页,此处用白名单处理
login.vue

<script>
let redirectUrl;
  // 不重定向白名单,比如从注册跳转到登录,登录之后应该到首页而不是回到注册页
  const whiteList = ['/register', '/resetPassword', '/setNewPhone']
  export default {
    beforeRouteEnter(to, from, next) {
      if (to.query && to.query.redirect) {
        redirectUrl = to.query.redirect
      } else {
        redirectUrl = from.fullPath
      }
      next();  
    },
    methods:{
      toLogin() {
        ...
        if (datas.data.Rescode == "0000") {
           let url = whiteList.indexOf(redirectUrl) === -1 ? redirectUrl : '/';
           this.$router.push(url);
        }
      }
    }
  }
</script>
Logo

前往低代码交流专区

更多推荐