Vue管理系统根据响应数据进行二次登录鉴权(Vue-admin-template)(axios)

Vue管理系统根据请求数据进行二次登录鉴权

• 演示项目：Vue-admin-Template
• 个人理解 如有误多多批评
• 进行一次登录鉴权是查看session或local里的存储数据，查询有没有账号数据，来进行基本的登录操作，防止没有进行登录的情况下直接访问系统主页
• 进行二次登录鉴权的原因是，当现在处于登录状态时，另一用户也登录同账号的话，因为token会改变，服务端会返回没有登录的信息，导致系统无法使用(页面数据无法渲染)，用户必须手动退出登录；而我们改变逻辑，收到服务端返回未登录逻辑，直接将其退出到登录页面
• 也就是说 如果没有登录顶下线的逻辑（允许多人登录同用户）的话 二次登录鉴权几乎是没有必要的

提示

• 代码切勿直接Copy，要取舍有用的部分
• 本文件创建于由Vue-admin-Template二次开发的项目中，对于其他系统模板下还需自行分析

请求封装

• 文件名不可确定，根据你项目的请求封装而定

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 请求封装的头部需要引入路由
import router from "@/router";

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 8000 // request timeout
})
// 请求前拦截 将token绑定到请求头上
service.interceptors.request.use(
  config => {
    if(sessionStorage.getItem("user")){
      config.headers['token'] = JSON.parse(sessionStorage.getItem("user")).token;
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 这里是成功条件 直接返回数据
    if(res.code == 200){
      return res;
    }
    // 这是是判断条件 需要改为你的服务端返回的未登录的错误代码条件 比如code 203条件则是res.code == 203
    if(res.state == 2){
    // 检测到未登录 直接跳出
      router.push({name:'login'})
    }
    return res;
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

路由

• router.js文件中需要加入下面的内容，对方法进行重写

// 重写方法使得其能够在request封装中调用
// Router是你引入的router import Router from 'vue-router'
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return VueRouterPush.call(this, location)
}
const VueRouterReplace = Router.prototype.replace
Router.prototype.replace = function replace(location) {
  return VueRouterReplace.call(this, location)
}

如果对您有用 三连支持 下期再见