退出登录方案实现

2022-04-19 19:02:50 阅读：266 来源： 互联网

退出登录触发时机一般有两种：
1.主动退出：用户点击退出登录按钮后退出
2.被动退出：token过期，或被人“顶号”退出

无论是什么退出方式，在用户退出时，所需要执行的操作都是固定的：
1.清理掉当前用户的缓存数据
2.清理掉相关权限的配置
3.返回到登录页面

用户主动退出登录功能实现

logout() {
      // 清除vuex缓存，初始化用户信息与token
      this.commit('user/setToken', '')
      this.commit('user/setUserInfo', {})
      // 清除loacalhost缓存
      remoAllItem()
      // 跳转到登录页
      router.push('/login')
    }

用户被动退出登录功能实现

场景1：token失效
场景2：单用户登录，其他人登录该账号，被顶号

处理方案：

主动处理方案：应对token失效，toekn是有时效性的，这个时效都是在服务端进行处理的。

在用户登录时，记录当前的登录时间
制定一个时效时长
在接口调用时，根据当前时间对比登录时间，看是否超过了时效时间
如果未超过，则正常进行后续操作
如果超过，则进行退出登录操作

auth.js:

import {
  TIME_STAMP,
  TOKEN_TIMEOUT_VALUE
} from '@/constant'
import {
  setItem,
  getItem
} from '@/utils/storage'
/**
 * 获取时间戳
 */
export function getTimeStamp() {
  return getItem(TIME_STAMP)
}
/**
 * 设置时间戳
 */
export function setTimeStamp() {
  setItem(TIME_STAMP, Date.now())
}
/**
 * 是否超时
 */
export function isCheckTimeout() {
  // 当前时间戳
  var currentTime = Date.now()
  // 缓存时间戳
  var timeStamp = getTimeStamp()
  return currentTime - timeStamp > TOKEN_TIMEOUT_VALUE
}

constance.js:

// token 时间戳
export const TIME_STAMP = 'timeStamp'
// 超时时长(毫秒) 两小时
export const TOKEN_TIMEOUT_VALUE = 2 * 3600 * 1000

登录成功，缓存token后，缓存token保存的时间：

import {
  setTimeStamp
} from '@/utils/auth'

login({
            username,
            password: md5(password)
          })
          .then(data => {
            this.commit('user/setToken', data.token)
            // 用缓存记录下token保存的时间
            setTimeStamp()
            resolve()
          })
          .catch(err => {
            reject(err)
          })

request.js:

import {
  isCheckTimeout
} from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 添加 icode
    config.headers.icode = '5FD82D1BDB03DBD2'
    // 在这个位置需要统一的去注入token
    if (store.getters.token) {
      // 每次发起请求，查看token是否已经过期
      if (isCheckTimeout()) {
        // 如果已经过期，执行登出
        store.dispatch('user/logout')
        // 这里抛出的错误，会在响应拦截器的错误捕捉中捕捉到
        return Promise.reject(new Error('token 失效'))
      }
      // 如果token存在 注入token
      config.headers.Authorization = `Bearer ${store.getters.token}`
    }
    // 必须返回 config
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

被动处理方案：应对token失效与单用户登录

服务端返回数据时，会通过特定状态码通知前端
当前端接收到特定状态码时，表示遇到了特定状态：token时效或单用户登录
此时进行退出登录处理

// 响应拦截器
service.interceptors.response.use(
  response => {
    const {
      success,
      message,
      data
    } = response.data
    //   要根据success的成功与否决定下面的操作
    if (success) {
      return data
    } else {
      // 业务错误
      ElMessage.error(message) // 提示错误消息
      return Promise.reject(new Error(message))
    }
  },
  error => {
    // 如果被顶号，主动退出登陆
    if (
      error.response &&
      error.response.data &&
      // 这里的状态码对应到被顶号，如果被顶号
      error.response.data.code === 401
    ) {
      // 退出登录
      store.dispatch('user/logout')
    }
    ElMessage.error(error.message) // 提示错误信息
    return Promise.reject(error)
  }
)

标签：方案,return,登录,token,error,退出,data
来源： https://www.cnblogs.com/JianXin1994/p/16166817.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

退出登录方案实现

用户主动退出登录功能实现

用户被动退出登录功能实现