前言
一般实现路由守卫，判断用户的登录状态使用token和cookie验证两种方法，之前出过一期利用token实现路由守卫的方法见此链接 Vue实现路由导航守卫(检测token，强制跳转)，这次项目后端是给我提供的cookie验证，写到这里就记录一下，希望能帮助到你们
1.登录请求记录cookie
一般来说，cookie的记录由后端来实现，我这里亦是如此，点击登录按钮发送登录请求正确，此时浏览器就有cookie生成出来，见下图：
红框里面的内容，是验证用户登录的标识符，如果你实现到了这一步，成功登录能够用cookie记录，那么咱们继续往下：
2. 获取cookie的方法
上面我们成功登录能够生成cookie，那么接下来我们就要拿到这个cookie进行判断，从而得出用户是否登录
这里我们新建一个 utils 目录下 cookie.js 文件。习惯性的进行封装，这个文件写对cookie操作的一些方法，下面我们来写获取到cookie的方法：
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
// return arr
if (arr != null) {
return unescape(arr[2])
} else {
return null
}
}讲一下这个方法:
- 函数传入name，也就是我们要获取的cookie的名字
- 正则表达式以及下面的判断都是为了我能能够取到cookie中我们需要的值
比如不做处理情况下：
处理之后读取到值为1：
特别说明：这里的项目出于web安全考虑，后端对cookie做了处理，前端无法读取。这里做后端的同学特别提供了一个单独的cookie与上面绑定在一起标识登录状态。
3.路由守卫做出判断
上面我们已经能拿到cookie的值，下面我们只需要做出判断给路由下达指令就行啦！
来到router文件，添加如下代码：
router.beforeEach((to, from, next) => {
if (cookie.getCookie("mk_l") === '1') {
next()
} else {
if (to.path === "/登录") {
next()
} else {
next('/登录')
}
}
})挂载路由守卫，to表示跳转路由，next表示放行，中间的判断根据自己项目需求进行填写！
特别注意： 因为我们这里示例为了方便让大家懂得意思，所以1表示已登录状态，放行。其它情况都跳转到登录界面！
效果演示
未登录状态下，cookie为空
此时路由输入/控制台，强制跳回登录界面
登录状态下，判断cookie正确，跳转路由进入系统
