(vue前端)用户登录和退出操作的实现

准备工作

先安装插件

npm install js-cookie

在相关页面引用插件的方式：

import cookie from 'js-cookie'

该插件目的于操作cookie，我们需要将token和用户信息放入cookie里，还要从cookie中读取token用于拦截器

创建拦截器

看到我们写调用接口的函数时常用的request文件了吗？我们就在这个js文件中配置拦截器，意思是对所有请求拦截。

详见以下代码中的最后一个函数：每次请求都从cookie中获取token，把它放入header中

这段代码要在写在 export default xxx 前面，xxx这里是service对象

实现用户登录方法

用户发出登录请求，我们在吧token放入cookie后，再根据token获取用户的信息，然后把用户的信息放入cookie中，最后再跳转页面。

给出这部分的实现代码，供参考：

1. 给出代码中，通过token获取用户信息这一函数（loginApi.getUserinfoByToken()），后端接口的参数应是HttpServletRequest类型的，因为我们先前已经将token放入header了，这方面是springMVC的知识
2. 最后的跳转页面有多种写法，也可以用vue的路由跳转

获取用户信息时要注意的

使用cookie.get('xxx')获取用户信息时，得到的数据虽然是json的形式，但不是json的结构，它只是一个字符串。

需要注意将字符串转换为json对象

退出登录的操作

清空cookie然后跳转即可

标签：插件,vue,登录,前端,用户,token,cookie,跳转,放入
来源： https://www.cnblogs.com/acdongla/p/16163513.html