vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中

需求:用户点击登录的时候获取token存取下来,然后放入请求拦截,因为用户上拉刷新下拉加载的时候需要用到;不然用户一刷新,服务端都不知道用户是谁了

请求存储token:

请求拦截,及请求错误的响应拦截

路由守卫(用来判断用户有没有登录;如果没有的话只能进入登录和注册页面)

觖析token存储到vuex中

请求存储token:

login.vue页面

//请求的时候存储token
loginClick(){// 实现登录,存储token// /users/login为端口后的路径this.$axios.post('/api/users/login',this.user).then(res =>{// res 结果用会返回token 我们可以用解构模式给他存储const { token } = res.data;// 存储lslocalStorage.setItem('wxToken',token);//存储之后页面进行主页跳转this.$router.push('/')})}

在与main.js同级中建立一个http.js进行

请求拦截,及请求错误的响应拦截

// 引入axios
import axios from 'axios';
import router from './router'
// 请求拦截
axios.interceptors.request.use(config => {// 判断是否存在token，如果存在的话，则每个http header都加上tokenif (localStorage.wxToken) {//条件这么写是因为在login.vue的页面把token存入了localStorage的wxToken中config.headers.Authorization = localStorage.wxToken ;}return config;//赋值完后把config返回回去}, error => {// 请求错误后把我们的error返回回去return Promise.reject(error);
})/*** 响应拦截* ,优式在于;在页面中每次请求的时候不需要写一遍catch*  */axios.interceptors.response.use(response => {//请求成功就给它返回回去return response;},// 请求错误error => {//错误提醒// 如果token过期了的话;我们也需要给一个提醒const { status } = error.response;//在response中有一个status 我们用es6的方式解构出来if (status == 401) {//后台定义401为token过期alert('token过期,请重新登录!');//  如果token过期了;我们应该清楚tokenlocalStorage.removeItem('wxtoken');//   清楚后让它跳转到登录页面去router.push('/login')} else {alert(error.response.data)}return Promise.reject(error);}
);
export default axios;

路由守卫(用来判断用户有没有登录;如果没有的话只能进入登录和注册页面)

router.js页面,或者router/index.js

import Router from 'vue-router'Vue.use(Router);
const router = new Router({mode: 'history',base: process.env.BASE_URL,routers: [{path: '/login',name: 'login',component: () => import('./login.vue')//懒加载模式}]
})
// 登录之前做一个判断 ,判断它进入其它页面有没有先登录,
router.beforeEach((to, from, next) => {// 判断有没有登录const isLogin = localStorage.wxToken ? true : false;// 如果当前访问的是登录页面或者注册页面可以让它进入if (to.path == '/login' || to.path == "/register") {next()} else {// 如果isLogin为true表示已经登录了;就让它正常进入就可以 ,如果没登录就让他进入登录页面isLogin ? next() : next('/')}})
export default router;

觖析token存储到vuex中

输入命令: npm install jwt-decode

jwt-decode是一种对token的解析包

在login.vue页面引入jwt-decode

import jwt_decode from 'jwt-decode'

当前端拿到后端返回的token，可以通过localStorage存储到本地，然后通过jwt-decode对token进行解析

不会安装vuex的请点击

 // /users/login为端口后的路径this.$axios.post('/api/users/login',this.user).then(res =>{// res 结果用会返回token 我们可以用解构模式给他存储const { token } = res.data;// 存储lslocalStorage.setItem('wxToken',token);// 解析tokenconst decode = jwt_decode(token)console.log(decode)//解析后打印出来会看到很多数据如ID;name等都是后台生成token登录的信息了// 解析后存储至vuexthis.$store.dispatch('setUser',decode);//存储之后页面进行主页跳转this.$router.push('/')})

我们在项目中的src目录下，创建store目录，用在store目录中创建store.js文件，store.js内添加以下代码：

import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex);
const types = {SET_USER: 'SET_USER' //用户信息
};
const state = {//初始化信息状态user: {}
};
const getters = {//获取状态信息user: state => state.user
};
const mutations = {//修改用户信息[types.SET_USER](state, user) {// [types.SET_USER]确定types类型等于SET_USER,if (user) {state.user = user;} else {state.user = {}}}};
const actions = {setUser: ({ commit }, user) => {commit(types.SET_USER,user)}
};
export default new Vuex.Store({state,getters,mutations,actions
});

此时还有一个弊端就是页面一刷新的时候token会消失,所以我们需要在APP.vue里面写入相关代码

<template><div id="app"><router/>></div>
</template>
<script>
import jwt_decode from 'jwt-decode'export default {name:'app',created(){//让页面一进来就掉用这个钩子;判断有没有之前存储的wxoken,有,就用token解析包解析然后存在vuex里面if(localStorage.wxToken){const decode = jwt_decode(localStorage.wxToken);this.$store.dispatch('setUser',decode);}}
}
</script>

vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中相关推荐

vue axios跨域请求_axios的请求拦截和vue路由的导航守卫有什么区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 1. 导航守卫:拦截组件导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过,如果登陆过,则可以跳转 ...
axios的使用（请求，响应拦截器）
axios的使用本篇博客简要讲述本人在前端vue开发过程中对于axios的理解文章目录 axios的使用前言一.axios是什么? 二.使用步骤 1.引入库 2.axios使用 1,引用axi ...
Vite2.0搭建Vue3.0项目应用实战
前言最近Vite2.0很火热,说是要替代webpack作为下一代前端构建工具.上个周末搬完房子仔细研究了一下,照着我们目前的项目环境,尝试搭建了一套基础环境,简单了解了Vite2.0的配置,以及各种 ...
vue请求拦截器响应拦截器
import axios from "axios"; // 创建一个axios的appconst request = axios.create({baseURL:'http://1 ...
我来说说 Vue面试知识点和 Vue3.0
昨天文章刚说了React的重要性和为何流行,今天北妈带你回归Vue,云里雾里.懵不懵逼都在你自己,反正无论如何,这一年我会疯狂的让大家学习,催促自己和你们一起学习,并且一起参与其中. 入正题一昨天 ...
如何使用 Axios 中的请求拦截器和响应拦截器
Axios 是一个常用的 JavaScript 库,用于发送 HTTP 请求和处理响应.在网站设计中,我们可以使用 Axios 请求拦截器和响应拦截器来实现一些常见的需求,例如添加认证信息.处理错误信 ...
axios（5）——请求拦截器和响应拦截器
1.axios访问流程 axios发送请求→axios请求拦截器→服务器→axios响应拦截器→then方法处理响应结果 2.使用代码讲解 <!DOCTYPE html> <html ...
vue3.0 + element-plus + 上传图片到七牛云
时间: 2021.8.30 ,想在项目中,把上传的图片存储到七牛云上,但是发现,七牛云他只给了一个限时 30 天的 cdn,就是在30天后,这个就会取消掉,不知道上传后的图片还有没有在 .需要绑定 ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...

vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中

请求存储token:

请求拦截,及请求错误的响应拦截

路由守卫(用来判断用户有没有登录;如果没有的话只能进入登录和注册页面)

觖析token存储到vuex中

vue3.0 请求拦截对Token处理,导航守卫判断是否登录,响应拦截,觖析token存储到vuex中相关推荐

最新文章

热门文章