token鉴权与路由前置路由配合使用，具体实现步骤

实现鉴权的个人具体思路

1.第一步 是不是要验证前端提交的数据， 是否与后端服务器中的存储的数据是不是一样的？

2.如果前端提交的表单数据校验成功，就需要在后端服务器中生成token值，并且设置存储信息，密钥，和token的过期时间，将token值返回给前端，（token注意是明文提交的形式，不应该携带用户名，密码等敏感信息，并且建议设置过期时间）

3.前端收到token值，就需要进行本地存储，并且在下一次发送请求的时候，请求头上就需要携带上token值，如果不携带token 就没有办法获取到后端服务器返回的消息

4.后端服务器就需要验证每次请求的路径中有没有token值，如果没有找到token值就需要返回报错，提醒用户没有携带token值

路由前置守卫(beforeEach)

应用场景 :

        有没有一种情况，我明明设置了登录页面，但是我可以在不登录的情况下，通过修改页面的路径就可以访问其他代码，如何解决这种情况呢？

答：beforeEach（）全局前置路由就可以实现, 如果你不输入正确的密码，就不可以访问其他页面,并且通过修改页面路径也不可以访问到

如何和token验证进行配合使用呢？

个人思路:

1.  如果服务器生成了token值，就需要进行本地存储，使用在路由前置守卫中声明等于本地存储的token值，去进行判断，如果token值存在，说明表单数据验证成功。

2.  这个时候就需要通过全局前置路由的三个参数 （path:表示当前路径，next ：表示下一步， from ：表示来自哪里） 来进行if逻辑判断当前的路径

3.如果当前的页面路径不是登录页面的路径，就需要判断token值是否存在，如果存在 就使用next（） 不想要去管它了，如果token不存在 就需要调用 next（登录的页面路径）进行页面跳转

问：为啥token值存在，就next（）?

答：因为token值存在表示密码验证成功！，就应该跳转相关页面不用在回登录页面了，使用next（）表示不用去管它了，跳它该跳的页面

4.如果当前的页面路径是登录页面的路径，还是需要进行判断token值，如果token值存在 就调用next（数据相关路径）跳转到数据的页面，如果没有token值，就调用next（登录页面路径） 

具体实现步骤

1.后端服务器数据结构

我使用的数据库是mongodb

数据库中的数据：

前端我使用的是vue3 组合式API

以上的代码我只实现了

1.提交表单数据，根据后端返回的code码，进行alert（）弹框提示具体消息

2.并且验证成功 后端服务器会返回token值，我在本地存储中设置“token”进行存储token值

3.并且每次提交数据不管成功还是失败，都清空了 form表单中的数据

还未实现：1.在请求头中携带 token值

                  2.配合路由守卫使用

后端node.js 我使用了express

以上的代码我只实现了

1.根据用户的提交的数据，在数据库中先去判断有没有用户名，没有用户名，直接返回400，并提示 相关错误

2.具体的解释，我在代码中已经进行了注释

还未实现：1.根据 jsonwebtoken 包 生成token值

                  2.在服务器端验证每次请求有没有携带token

服务器端生成token

1.下载 npm  i  jsonwebtoken 包

2.并且在文件中 声明变量 进行 引入  const xxx = require（"jsonwebtoken" ）

3.在表单数据验证成功后，生成调用 jwt.sign（）生成token值 发送到前端

具体步骤：

jwt.sign（）可以设置三个参数 

参数1. 要包含在 token 中的数据对象。可以是任何可以序列化的 JSON 对象，（随便你写）

参数2.  简单理解就是一个密钥，要记住 后端服务器还需要根据它来识别你 ，（要记住密钥，后续有用）

参数3：expiresIn: token 的过期时间，可以是秒数或时间字符串（如 '1h'，'2d'）。（建议设置的时间间隔短一些，不容易出问题）

因为我前面的vue3文件中已经进行了本地存储，当输入正确的数据时，就会存储token

后端改变了一个小细节，基本没有变化（使用结构赋值来承接req.body中的数据），继续写就好

前端每次请求的时候都携带配置token值

1.每次在请求的路径去携带token值，太过于麻烦，并且十分不方便，所以使用了请求拦截器

axios.interceptors.request.use()，

2.复制粘贴 在vue3的main  入口文件

携带token值

每次请求的时候就先来到 请求拦截器中 携带token值

与路由前置守卫配合

这是时候就需要去配置我们的路由全局守卫，如果没有token值，只能访问登录页面，其他页面都不允许访问！！

实现了，如果不登录成功，就不能访问其他页面（修改页面路径也不可以）

还差最后一步，去后端服务器去校验 前端服务器每每发起请求的时候，有没有携带token值

后端服务器去校验token值

我需要在后端服务器去下载一个包  npm i express-jwt@6 (注意必须是@6版本)

声明变量去承接express---jwt

之前去npm官网去搜索

去自己的后端服务器去挂载就好

之前我们配置token时的密钥

具体代码：

剧终！