token在vue中存储和使用

时间：2025-04-27 19:19:49

目录）

  • 页面路由
  • 登录成功存放token在vue中
  • 定义全局axios拦截器
  • 每次请求携带token以及清除token

页面路由

router\
增加路由要放在详情路由前面

 {
    path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前
    name: 'BlogAdd',
    meta: {
      requireAuth: true
    },
    component: BlogEdit
  },
  {
    path: '/blog/:blogId',
    name: 'BlogDetail',
    component: BlogDetail
  },
  {
    path: '/blog/:blogId/edit',
    name: 'BlogEdit',
    meta: {
      requireAuth: true
    },
    component: BlogEdit
  }

带有meta：requireAuth: true说明是需要登录字后才能访问的受限资源，后面我们路由权限拦截时候会用到。

登录成功存放token在vue中

submitForm(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 提交逻辑
            this.$('http://localhost:8081/login', ).then((res)=>{
              const token = ['authorization']
              _this.$('SET_TOKEN', token)
              _this.$('SET_USERINFO', )
              _this.$("/blogs")
            })
          } else {
            ('error submit!!');
            return false;
          }
        });
      },

从返回的结果请求头中获取到token的信息，然后使用store提交token和用户信息的状态。
token的状态同步
所以在store/中，代码是这样的：

import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
export default new ({
  state: {
    token: '',
    userInfo: (("userInfo"))
  },
  mutations: {
    SET_TOKEN: (state, token) => {
       = token
      ("token", token)
    },
    SET_USERINFO: (state, userInfo) => {
       = userInfo
      ("userInfo", (userInfo))
    },
    REMOVE_INFO: (state) => {
      ("token", '')
      ("userInfo", (''))
       = {}
    }
  },
  getters: {
    getUser: state => {
      return 
    }
  },
  actions: {},
  modules: {}
})

存储token，我们用的是localStorage，存储用户信息，我们用的是sessionStorage。毕竟用户信息我们不需要长久保存，保存了token信息，我们随时都可以初始化用户信息。

定义全局axios拦截器

点击登录按钮发起登录请求，成功时候返回了数据，如果是密码错误，我们是不是也应该弹窗消息提示。为了让这个错误弹窗能运用到所有的地方，所以我对axios做了个后置拦截器，就是返回数据时候，如果结果的code或者status不正常，那么我对应弹窗提示。
在src目录下创建一个文件（与同级），定义axios的拦截：

import axios from 'axios'
import Element from "element-ui";
import store from "./store";
import router from "./router";
='http://localhost:8081'
(config => {
  ("前置拦截")
  // 可以统一设置请求头
  return config
})
(response => {
    const res = ;
    ("后置拦截")
    // 当结果的code是否为200的情况
    if ( === 200) {
      return response
    } else {
      // 弹窗异常信息
      ({
        message: ,
        type: 'error',
        duration: 2 * 1000
      })
      // 直接拒绝往下面返回结果信息
      return ()
    }
  },
  error => {
    ('err' + error)// for debug
    if() {
       = 
    }
    // 根据请求状态觉得是否登录或者提示其他
    if ( === 401) {
      ('REMOVE_INFO');
      ({
        path: '/login'
      });
       = '请重新登录';
    }
    if ( === 403) {
       = '权限不足，无法访问';
    }
    ({
      message: ,
      type: 'error',
      duration: 3 * 1000
    })
    return (error)
  })

然后再中导入

import './' // 请求拦截

每次请求携带token以及清除token

methods: {
      logout() {
        const _this = this
        this.$('http://localhost:8081/logout', {
          headers: {
            "Authorization": ("token")
          }
        }).then((res) => {
          _this.$('REMOVE_INFO')
          _this.$('/login')
        });
      }
    },

相关文章