vue全局前置,判断用户是否登录

说白了就是路由拦截,点击一个路由,判断一下是否为登录状态,如果是登录状态跳转到首页或其他页面,如果不是登录状态就跳转到登录页面

思路就这么简单,接下来看看代码吧

index.js

//导航守卫
// 使用router.beforeEach注册一个全局前置守卫,判断用户是否登录
router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {           //这里的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表示进入该路由需要登陆的
    if (store.state.token) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
    }
  })

export default router

在路由自定义一个requireAuth,代码如下

const router = new Router({
    mode: 'history',
    routes: [
        {
            //登录
            path: '/login',
            name: 'login',
            component: () => import('@/views/member/login'),
            meta: {
                show: true,
            }
        },
        {    
            //首页
            path: '/',
            name: '首页',
            component: () => import('@/views/index'),
        },
        {
            //我的订单
            path: '/new/order',
            name: 'order',
            component: () => import('@/views/new/order'),
            meta: {
                show: true,
                requireAuth: true,
            }
        },
    ]
})

有什么问题可以下方留言,共同探讨