登录功能实现思路

1.获取接口里面的token,
2.存储token到本地存储里面【 localStorage.setItem(tokenkey, token)】,在控制台输入localStorage可以查看到本地存储的token值,在应用程序-本地存储也能看到token值
3.将接口放到localStorage里面之后(localStorage.setItem(tokenkey, token)),需要设置请求拦截器,将从本地获取到的token放到每次发起请求的接口的头里面,保证每个接口都携带token值。 config.headers[‘token’] = getToken(‘token’)

先参考token接口信息,信息要求访问token接口时需要携带参数username和password。
在这里插入图片描述

那么此时就需要获取登录页面的用户名和密码,当点击登录按钮的时候,发起axios请求token,请求需要携带用户名和密码。

先从后端给的生成token的接口,获取token以及相关参数,此接口返回的是token和username,将token和username放到本地存储中,localStorage.setItem(tokenkey, token),用户登出时,将本地存储的token清空就可以了
在这里插入图片描述
在这里插入图片描述
注:正常情况下,用不同用户名访问页面,生成的token都是不一样的。
如果没有token的话,访问登录页面要输出用户名和密码,访问登录页面下面的每个子页面也要分别输入用户名和密码

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Never-c

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值