根据登陆状态跳转对应路径

需求

用户没有登录不能做任何操作

实现思路

1，登录成功保存 cookie
2，路由守卫根据 cookie 跳转对应路径
3，登出清除 cookie （或者设置cookie的存活时间）

1，登陆保存 cookie

Cookies.set(TokenKey, “xxxxxx”)

2，路由守卫根据 cookie 跳转对应路径

// main.js && main.ts

router.beforeEach((to, from, next) => {
  // 判断将要跳转的路径没有验证 (true)
  if (to.matched.some(m => m.meta.auth)) {
  // 如果存在 cookkie (getJWTToken()，是我封装的一个方法)
    if (getJWTToken()) {
      next()
    } else {
      next({ path: "/login" })
    }
  } else {
    next()
  }
  // console.log(from, to)
})

// router ⇒ index.ts 
//  如果该路由需要验证，就加上 meta: { auth: true };
  {
    path: '/addWorks',
    name: '作品上传',
    component: addWorks,
    meta: {
      auth: true
    }
  },
  {
    path: '/apply',
    name: 'apply',
    component: () => import(/* webpackChunkName: "about" */ '@/views/apply/apply.vue'),
  }

3，登出清除 cookie （或者设置cookie的存活时间）

Cookies.remove(TokenKey)

注意

这个案例只是简单介绍一下利用路由守卫根据用户是否登录，从而判断路由跳转的小栗子。具体还要看你们项目，譬如，一般项目保存 cookie 是直接就在请求里面操作的，又或者是利用 vuex 实现的，方法不限。