vue加token

今天遇到一个问题：登录了还一直让我去登录

我才知道是需要给请求头加上token
王哥说
token 就是你登录的时候返回给你的数据
这个token 你需要登录后 存起来
然后 再开一个拦截器，每次访问请求的时候 都把这个token 加到请求头里面去
不开拦截器的话 你就要在代码中 手动给你要发送的请求的请求头中 加上token
然后我就去查如何 Vue 如何给请求带上请求头 | 如何带上token

可以在登陆的时候获取token，然后存起来，在拦截器里面判断是否有你的token，有就统一加上呗

每次跳页面, 都要获取新路由对应的html页面, 这时候可以用axios的http拦截每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token, 当后端接口返回 401 Unauthorized–未授权 ，让用户重新登录。

深入理解token

为什么用token？
Token 是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌。

需要为 Token 设置有效期吗？

token和localstorage的结合

axios.interceptors.request.use(function (config) {
  let userInfo = localStorage.getItem('userInfo')
  let token = ''
  if (userInfo != undefined && userInfo.length > 10) {
    userInfo = JSON.parse(userInfo)
    if (userInfo.token) {
      token = userInfo.token
    }
  }
  //
  // if (config.url.indexOf(url) === -1) {
  //   config.url = url + config.url /* 拼接完整请求路径 */
  // }
  // config.url = config.url.replace(/\/\//, '/')

  config.withCredentials = true
  config.headers = {
    'token': token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})
axios.defaults.timeout = 30000 // 超时时间
axios.interceptors.response.use(function (response) {
  // token 已过期，重定向到登录页面
  if (response.data.status === 401) {
    localStorage.clear()
    router.replace('/')
  }
  return response
}, function (error) {
  if (error.message.includes('timeout')) { // 判断请求异常信息中是否含有超时timeout字符串
    return { data: { 'status': 601 } }
  }
  // Do something with response error
  return Promise.reject(error)
})

方法1：
vuex + axios 做登录验证 并且保存登录状态

方法2：
在vue中如何获取token，并将token写进header
代码不一定，有几个报错的地方：

问：.vue文件如何引入store



login.vue

this.$axios({
  method: 'post',
  url: '/api/user/login',
  data: params
}).then(res => {
  console.log('登录成功')
  console.log(res)
  // 根据store中set_token方法将token保存至localStorage/sessionStorage中，data["Authentication-Token"]，获取token的value值
  this.$store.commit('set_token', data["Authentication-Token"])
  if (store.state.token) {
    this.$router.push('/person')
    console.log(store.state.token)
  } else {
    this.$router.replace('/login')
  }
})

store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    set_token (state, token) {
      state.token = token
      sessionStorage.token = token
    },
    del_token (state) {
      state.token = ''
      sessionStorage.removeItem('token')
    }
  },
  actions: {
  },
  modules: {
  }
})

main.js

import Vue from 'vue'
import './cube-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import Cube from 'cube-ui'

Vue.use(Cube)
Vue.prototype.$axios = axios
Vue.config.productionTip = false
// 定义全局默认配置
axios.defaults.headers.common['Authentication-Token'] = store.state.token

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 判断是否存在token，如果存在将每个页面header都添加token
  if (store.state.token) {
    config.headers.common['Authentication-Token'] = store.state.token
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  if (error.response) {
    switch (error.response.status) {
      case 401:
        this.$store.commit('del_token')
        router.replace({
          path: '/login',
          query: { redirect: router.currentRoute.fullPath }// 登录成功后跳入浏览的当前页面
        })
    }
  }
  return Promise.reject(error)
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import member from '../views/member.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/person',
    name: 'person',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/person.vue')
  },
  {
    path: '/member',
    name: 'member',
    component: member
  }
]

// 页面刷新时，重新赋值token
if (sessionStorage.getItem('token')) {
  store.commit('set_token', sessionStorage.getItem('token'))
}

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) { // 这里的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表示进入该路由需要登陆的
    if (store.state.token) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

export default router