Javascript

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

本文主要是介绍(vue前端)用户登录和退出操作的实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

image-20220418221824758

准备工作

先安装插件

npm install js-cookie

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

import cookie from 'js-cookie'

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

创建拦截器

image-20220418223519521

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

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

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

image-20220418235040724

实现用户登录方法

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

给出这部分的实现代码,供参考:

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

image-20220418233917391

获取用户信息时要注意的

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

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

image-20220418235826888

退出登录的操作

清空cookie然后跳转即可

image-20220419001254121

这篇关于(vue前端)用户登录和退出操作的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!