VUE实现token登录验证

最新推荐文章于 2024-07-22 13:42:28 发布

marsur

最新推荐文章于 2024-07-22 13:42:28 发布

阅读量9.8k

点赞数 17

分类专栏： VUE 文章标签： ajax vue token验证

本文链接：https://blog.csdn.net/marsur/article/details/88952403

版权

本文记录了使用Vue实现token登录验证的详细过程，包括store中token操作的封装、登录接口验证、路由守卫设置及axios请求拦截器的使用。在解决一系列问题后，作者分享了关键代码和后端接口数据结构，旨在避免未来的错误。

摘要由CSDN通过智能技术生成

实现这个登录功能的过程真是一波三折，中途出现了bug，整了两三天才解决了问题，心力交瘁，简直一个头两个大，感觉自己的毅力和耐心又提升了一个层次ORZ

好在最终在同学的帮助下解决了bug，不过我又再次感受到了作为一个菜鸟的浅薄，大佬的问题屡次触及到我的知识盲区......现在详细地记录一下实现token登录验证的步骤，以防以后再犯错

1.封装store对token的操作方法

首先在src目录下创建一个store文件夹，再创建一个main.js文件

main.js存放的代码作用是获取token的值和用localStorage存储、删除本地token的值

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
  },
  mutations: {
    setToken (state,token) {
      state.token =token;
      localStorage.setItem("token",token.token);     //存储token
    },
    delToken (state) {
      state.token = '';
      local