设计

在src目录下创建一个interceptor.js
登录逻辑
- 设置拦截,在发起请求前,先判断用户是否登录(在本栗中,即是否能够在浏览器缓存中找到token).
登出逻辑
- 对服务端传过来的数据进行拦截,判断其状态码是否为401(未登录或token过期)
- 清空浏览器缓存中的token
- 重定向到登入页面
interceptor.js

const axios = require('axios');// 参数是Vue实例
export default function(vm) {// 设置请求拦截器axios.interceptors.request.use(config => {// 获取tokenconst token = localStorage.getItem('token');if (token) { // 如果存在令牌则添加token请求头//      config.headers.token = token;   // 注: 使用Bearer Token规范config.headers.Authorization = `Bearer ${token}`;}return config;})// 响应拦截器axios.interceptors.response.use(null, err => {if (err.response.status === 401) {  // 没有登录,或者令牌过期// 清空vuex和localstoragevm.$store.dispatch('logout');// 跳转loginvm.$router.push('/login');}return Promise.reject(err);})
}

拦截使用

main.js

import Vue from 'vue'
import './cube-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import interceptor from './interceptor'Vue.config.productionTip = false// 拦截器的初始化const app = new Vue({router,store,render: h => h(App)
}).$mount('#app')interceptor(app);

vue --- http拦截,登录登出的逻辑设计相关推荐

从零开始java安全权限框架篇（一）：spring security配置登录登出的配置
目录一:安全权限框架的选取二:功能三:登录登出四:代码注释 1.将登陆交由Spring security完成 2.前台明文密码加密,与数据库比对 3.关键配置 4.自定义用户异常 5.ajax ...
网易云信集成视频教程（四）：如何快速实现iOS登录登出？
上期我们介绍了如何通过SDK实现自定义消息,第四期视频教程我们将教大家如何快速实现iOS系统下IM登录登出. 第四期如何快速实现iOS登录登出? 8分钟视频手把手教你接入文档详解前期准备 1. ...
网易云信集成视频教程（一）：如何快速实现安卓登录登出？
由于网易云信稳定.可靠的技术服务以及拥有深厚积淀的行业口碑,越来越多用户集成云信IM和音视频功能.为了提升用户集成效率,我们推出了一系列网易云信集成视频教程,希望帮助用户快速实现功能接入.第一期将为大 ...
CAS 单点登录/登出系统
前言: 在我们的实际开发中,更多的是采用分布式系统.那么问题来了,对于分布式系统的登录问题,我们如何解决呢? 如果说我们在每一个系统中都要进行一次登录,那么用户体验度也就差的没法用了.以京东商城为例, ...
[django项目] 实现用户登录登出功能
用户登录登出功能 I. 功能需求分析 1>功能分析 1.1>流程图 1.2>功能接口登录页面登录功能退出功能 II. 登陆页面 1>接口设计 1.1>接口说明类目 ...
linux 执行程序注销,Linux登录登出的过程 | Soo Smart!
最近一直遇到crontab执行脚本和手动执行结果不一样的问题.根据添加的echo语句已经确定crontab能够准时执行任务,可是脚本里的程序不能正确执行.唯一能确定的是环境变量问题,可是即使明确地写上 ...
java php 单点登陆,cas实现单点登录,登出(java跟php客户端)（转）
cas实现单点登录,登出(java跟php客户端)(转)cas实现单点登录,登出(java和php客户端) (转) 最近项目中需要做单点登录,客户端包含java和php,java有几个应用程序,php ...
ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程，简单编程
ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程原文:ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单 ...
SpringBoot登录登出切面开发
阅读本文约"2.5分钟" 本文开发环境是SpringBoot2.X版本. 对于系统而言(这里多指管理系统或部分具备登录登出功能的系统),登录登出是一个类权限验证的过程,现在一般是以 ...

vue --- http拦截,登录登出的逻辑设计

设计

拦截使用

vue --- http拦截,登录登出的逻辑设计相关推荐

最新文章

热门文章