vue和elementul写后台登录 退出逻辑

当我们点击登录的时候思路:

表单进行兜底验证 =>验证通过

 //1 发送信息给后台验证
   
 //2 给用户提示信息
       
 //3 后端返回的token储存到  vuex 和 storage中
         
 //4 路由跳转页面到主页(默认页面)
          
 //5 清除表单验证 表单已经输入的内容

表单进行兜底验证 =>验证不通过

// 验证不通过,返回错误
    return false

 当我们点击退出的时候思路

// 1 弹出确定要退出的询问框

// 2 判断用户点击确定还是取消

// 3 用户点确定

  // 3.1 跳转到登录页面
        
  // 3.2 给用户提示"已退出"
      
  // 3.3本地清除token
       
  // 3.4清除vuex中的token
   

// 3 用户点击取消 提示用户"已取消"
   

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现登录退出后台验证,您需要进行以下步骤: 1. 创建一个登录页面,包括用户名和密码的输入框以及登录按钮。 2. 当用户点击登录按钮时,前端发送请求到后端验证用户名和密码是否正确。您可以使用 axios 进行请求,如下所示: ``` import axios from 'axios'; axios.post('/api/login', { username: 'yourUsername', password: 'yourPassword' }).then(response => { // 处理登录成功的逻辑 }).catch(error => { // 处理登录失败的逻辑 }); ``` 3. 如果后端验证成功,则返回一个 token 给前端。前端可以将 token 存储在本地,例如使用 localStorage。 ``` localStorage.setItem('token', response.data.token); ``` 4. 在每个需要验证的请求中,前端都需要将 token 发送给后端进行验证。您可以在 axios 的拦截器中进行处理,如下所示: ``` import axios from 'axios'; axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); }); ``` 5. 当用户退出登录时,前端需要清除本地存储的 token。 ``` localStorage.removeItem('token'); ``` 6. 后端需要对每个请求进行 token 的验证,如果验证失败,则返回 401 错误码给前端。 以上就是实现登录退出后台验证的步骤。当然,这只是一个简单的实现方式,具体的实现方式可能因为您的项目需求而有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值