前言
全栈项目开发——NOTEBOOK(4)：优化代码，实现注册页前后端数据库交互 - 掘金 (juejin.cn)
在上一篇文章中我们实现了正常的用户注册功能，使得新用户能够通过注册页通过注册信息跳转到登入页登入平台。在此基础上我们需考虑安全访问控制——如果用户通过web端直接输入需要登入才能展示的页面url地址，我们应该将她引导至登录页。
一，登入鉴权
我们需要鉴定用户有没有访问这个界面的权限，如果用户没有注册登入则没有权限直接访问目标页面。
路由守卫
路由守卫（Route Guard）是Vue.js中vue-router提供的一种功能，用于在路由切换时执行特定的逻辑，以控制和管理路由的访问。它类似于生活中的门卫或保安，负责检查用户是否有权限进入某个区域（在这里指的是路由对应的页面或组件）。路由守卫可以在路由导航的不同阶段被调用，包括全局守卫、路由独享守卫和组件内守卫，以实现诸如登录验证、权限控制、页面跳转控制等功能。
为保障数据安全与业务逻辑正确，我们需设置路由守卫，在前后端实施鉴权机制。通过前后端鉴权，确保用户不能直接访问需登录的页面。前端路由守卫拦截非法访问，引导至登录页；后端验证请求中的授权信息，确保数据访问合法。两者结合，构建安全的访问控制体系，保护平台数据安全。
前端鉴权
当用户访问需要登录授权的网页地址时，前端判断本地是否有存在用户信息数据，
如果有，则认为已登录
如果没有，则跳转到登录页面。
要实现这个效果我们必须使用路由守卫
路由守卫：在路由跳转之前，对用户是否登录进行判断，如果未登录，则跳转到登录页面。
后端鉴权
前端输入正确账号密码给到后端，
后端校验账号密码合法，用该账号信息生成一个加密的令牌token，并返回给前端保存
前端接下来所有的接口请求全部需要带上这个接口请求token给后端
后端校验token是否合法，如果合法，则登入成功
二,实现前端鉴权
什么是路由守卫我们已经清楚，如何使用他呢？点击查看官方文档 入门 | Vue Router (vuejs.org)
后置守卫通常被设计为在用户访问某个页面并完成页面加载后执行的逻辑，比如弹出广告窗口。 在这里我们使用前置守卫阻止实现用户登入页面的鉴权。
1. 前置守卫
全局前置守卫router.beforeEach 接受三个参数to, from, next。我们可以通过to和from获取用户跳转前后的路径，通过next执行放行操作。
router.beforeEach((to, from, next) =>{
// 查看后台拿到的前后跳转路由信息
console.log(to, from);
}
分别打印的 to和 from , 记录用户从/login页面去往 /noteClass
2 .实现前端鉴权
- 首先设置页面白名单，用户可以顺利访问白名单内的路径
- 通过
to.path拿到用户想要跳转的路径， - 如果用户将要跳转的路径不在白名单内
- 通过localStorage.getItem('userInfo')检测浏览器的本地存储，判断用户曾经是否登入过
- 如果没有值则说明没登入过，跳转到登入页面
- 反之则通过next()放行
- 如果在白名单内则直接放行
// 设置页面白名单，登入和注册页面开放给用户直接访问
const whitePath = ['/login', '/register']
// 全局路由守卫————前置守卫
router.beforeEach((to, from, next) => {
// 用户访问的地址在不在白名单中
if (!whitePath.includes(to.path)) {
// 判断本地有无用户数据
if (!localStorage.getItem('userInfo')) {
router.push('/login')
return
}
// 如果本地有数据，说明用户已经登录过
next() // 放行
return
}
// 如果用户访问的是白名单中的地址，直接放行
next()
})
注意：在判断中需要使用 return 立即结束函数，防止next()的调用 || 使用return可确保仅在用户登录且路径非白名单时放行，有效阻止非法访问，增强应用安全性。
查看效果
我们先清空浏览器的本地储存，在web页面改变url地址查看效果，我们发现当浏览器本地储存为空时（用户未登入过时），直接访问目标页面将被push至/login页面
通过前端鉴权功能确实是实现了但是仍然有缺点，正所谓 防君子不防小人 ，如果我直接在浏览器后台手动输入 userInfo,阁下又将怎么应对？
小计
在本篇内容中我们了解了什么是鉴权什么是路由守卫，并且成功通过前置守卫router.beforeEach实现前端鉴权。了解了前置路由守卫的实现原理后新的问题页接着出现——如何防止用户直接在浏览器后台插入userInfo实现免注册登入跳转到目标页面？
本章要点：登入鉴权，路由守卫，router.beforeEach((to, from, next) ，localStorage.getItem('userInfo') ， if(){return}...
