Vue.js应用中Chrome无法将Token存入Local Storage的问题求助

核心问题 #

你的代码完全没有编写将Token存入Local Storage的逻辑，这就是Chrome开发者工具里看不到Token的根本原因。而页面持续重定向回登录页，大概率是路由守卫检查登录状态时找不到存储的Token，判定未授权导致的。

修正步骤 #

1. 登录成功后存储Token到Local Storage #

修改submit方法的成功回调，添加存储Token的代码：

.then(res => {
  console.log(res);
  // 把后端返回的Token存入Local Storage
  localStorage.setItem('authToken', res.data.token);
  this.$router.push({ path: "/" });
})

2. 调整路由守卫逻辑（如果使用了路由守卫） #

假设你的Vue Router配置了全局前置守卫，需要让它读取Local Storage中的Token来判断授权状态。示例配置如下：

// router/index.js
import VueRouter from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    // 给需要授权的路由添加requiresAuth标记
    { path: '/', component: Home, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  // 从Local Storage读取Token判断是否已登录
  const hasToken = localStorage.getItem('authToken') !== null
  // 如果路由需要授权但没有Token，重定向到登录页
  if (to.matched.some(item => item.meta.requiresAuth) && !hasToken) {
    next('/login')
  } else {
    next()
  }
})

export default router

3. 接口请求自动携带Token（可选） #

后续调用后端接口时，可以通过Axios拦截器自动在请求头中携带Token，避免每次手动添加：

// 在main.js或单独的axios配置文件中
import axios from 'axios'

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken')
  if (token) {
    // 按后端要求的格式携带Token，这里用Bearer示例
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

验证方式 #

修改代码后重新登录，打开Chrome开发者工具的Application标签，展开Local Storage -> 当前域名，就能看到authToken的键值对。此时跳转首页将不会被重定向回登录页。

内容的提问来源于stack exchange，提问作者xander