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)
}
如果对您有用 三连支持 下期再见