登录
根据页面原型有一个登录按钮和一个取消按钮点击登录按钮，我们向服务端发送请求执行登录流程登录成功进入这个流程跳转到系统的首页如果失败提供信息点击取消执行重置的效果然后在清空表单项
登录页面所在位置为：src/views/login/index.vue，基本的页面布局，我们已经写好了。
我们可以在浏览器中访问路径：http://localhost:5173/login 访问到登录页面。
在登录页面的基本内容有它里面就是一个form表单一个是用户名，一个是密码有两个按钮，一个是登录，一个是重置就是取消，然后用户名表达项的内容绑定到了loginForm.usename这个内容当中
然后密码那个是绑定的了他属性密码当中 因为登录页面暂时还没有实现所以我们要通过url网址进行切换
首先呢，我们要在api定义一个与服务端交互的函数这个函数当中传入deta这个对象然后再把他引入进来然后我们对下面的两个按钮进行事件绑定然后把这两个对应时间的函数声明出来,在登录按钮当中调用登录函数与服务端交互的传入对应的属性然后根据返回的判断 成功的话进行信息提示然后在跳转页面 通过引入路由的函数来进行跳转然后说明它里面的这个函数然后再发回来继续进行页面跳转然后调用它里面的一个方法push然后在括号里面指定跳转的路径然后失败了提示失败信息重置的话在这个函数当中直接将这两个属性定义为空串
在登录成功之后，需要记录用户的登录信息，这里我们可以直接将用户的登录信息记录在浏览器端的
localStorage本地存储中，以后需要使用登录的相关信息，直接从localStorage中取出即可。
因为要交登录成功的信息储存起来所以我们要在跳转页面之前储存登录员工的信息这里我们使用浏览器的本地存储机制他的键和值都是字符串类型使用对应的方法，你们拿回来的东西是一个对象所以你要把它变成字符串 需要用到js 函数进行转换
当我们登录成功后发现有些数据还是查不了因为还没有将令牌储存
携带令牌访问
在后续的每一次Ajax请求中都获取 localStorage 中的令牌，在请求头中将令牌携带到服务端。 如果这么做，就会非常麻烦，需要在每一次ajax请求的时候获取中存储在 localStorage 中的令牌，并携带到服务端，是非常繁琐的。
我们可以思考一下，目前我们项目的Ajax请求，是不是都是基于Axios发送的，而在我们的项目中，我们是自己定义了一个axios的请求对象request。所有的异步请求，是不都是基于request对象发起的。 所以，这里呢，我们可以借助于axios中提供的拦截器来进行统一处理。
因为在后续的每一次当中，我们都要写在这个令牌这样比较繁琐这里我们就借助
因为在后续的每一次当中，我们都要写在这个令牌这样比较繁琐这里我们就借助于axios中提供的拦截器来进行统一处理。
在这个返回类当中我们定义一个请求拦截器获取他的令牌增加请求头首先能发送请求进行判断如果成功回调了他传入了一个参数connfig这是一个配置对象 把它打印在控制台上，我们能发现 其中有一个属性为headers它里面就携带的请求头我们就要操作这个属性
接下来，我们就需要在request.js 中通过axios的拦截器实现此功能。具体代码实现如下:
首先呢，我们要获取这个令牌因为这个令牌储存在浏览器的本地存储空间localStoraage我们通过get方法把它取出来我们通过他的键名来把它过去出来因为他是个字符串的一些我们要通过JSON这个方法 把字符串转为对象然后进行判断如果她的本地储存了这个东西写对应的令牌也储存那我们就来添加这个令牌用到上面的config里面的一个属性headers给他复制把添加令牌
最后再返回这个配置类必须所有的请求方式都是基于request来发起
响应401跳转到登录页面
目前，即使用户未登录的情况下访问服务器，服务器会响应401状态码，但是前端并不会跳转到登录页面。 因为，我们在前端并未做任何的拦截判断。接下来，我们就来实现此功能，我们只需要在服务端将数据响应给前端时，在axios的响应拦截器中统一判断处理即可
我们要在响应拦截器当中处理 如果响应状态为401的话我们就要跳转登录界面我们要在失败回调函数当中处理根据这个error 它有一个属性同时也是个对象response.status这里面就有对应的状态码这里我们要用三等号为全等类型和值必须全等全等的话不行不会进行隐式转换然后完成两部内容第一个是进行提示信息然后因为用到了这个登录提示的弹窗，我们要引入然后第二部是跳到登录界面我们要引入对应的路由实例就是那个对应的一个路由表然后导入这个路由实例对象我们直接调用它的方法rouuter.push直接在括号中写上对应的路径如果是其他异常的话我们在进行else进行提示
退出
我们打开浏览器，完成登录之后，就可以看到，在退出登录之后，就显示出了当前登录员工的姓名。然后点击退出登录，就可以看到效果如下：
点击确定之后，就会退出登录，跳转到登录页面。
然后我们进行操作先去引入一个响应式数据ref和钩子函数到这个布局页面当中在钩子函数当中获取当前登录员工的信息因为货取回来的是一个字符串我们需要用到json方法把他转为对象然后进行判断如果这个对象存在然后他对应的name也存在然后我们就对这个上面声明的这个ref的这个loginName进行赋值然后最终在视图页面展示的时候在退出登录后面写上插值表达式然后就可以了
我们已经完成了第一步在右上角战士登录员工的姓名然后我们完成第二步退出登录,我们要为这个超链接添加一个事件同时为这个链接跳转变为死链接然后添加一个事件往后声明一个这个事件对应的一个函数然后第一步是弹出确认框就和删除那个一样以前是提示信息，然后如果是确认的话，想要提示退出成功的 提示信息然后我们要删除对应的登录信息也是调用浏览器本地存储的对象使用removerItem这个方法进行删除对应的登录信息和令牌然后再跳转页面跳转到登录界面涉及到跳转我们要引入对应的路由然后调用这个函数然后再调用这个函数对应的push的方法括号里写上对应的路径如果是取消的话，提示对应的信息