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;
                // 存储ls
                localStorage.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都加上token
    if (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过期了;我们应该清楚token
          localStorage.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;
                // 存储ls
                localStorage.setItem('wxToken',token);
                // 解析token
                const decode = jwt_decode(token)
                console.log(decode)//解析后打印出来会看到很多数据如ID;name等都是后台生成token登录的信息了
                // 解析后存储至vuex
                this.$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里面写入相关代码