关于后台管理系统的token那些事

什么是token以及token的作用

什么是token

Token是首次登陆时由服务器下发，作为客户端进行请求的一个令牌，当交互时用于身份验证的一种验证机制，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

token的作用

• Token完全由应用程序进行管理，所以它可以避开同源策略
• Token可以避免CSRF（跨站请求访问）攻击
• Token可以是无状态的，可以在多个服务器之间共享
• 使用Token减轻服务器的压力，减少频繁的查询数据库。

更多关于token查看这篇文章

项目中请求以及存储token

请求token

在登陆阶段用户输入正确的用户名密码再将请求到的token存入cookie中，在封装axios时将请求到的token放入请求头中作为令牌。

vuex 的user 模块

  mutations: {
    SET_TOKEN: (state, token) => {
    //存入localStore和session中
      setToken(token);
      state.token = token;
      setStore({name: 'token', content: state.token})
    },
   }
  actions: {
    //根据用户名登录
    LoginByUsername({commit}, userInfo) {
      return new Promise((resolve, reject) => {
        const time = '' + userInfo.date;
        loginByUsername(userInfo.username, userInfo.password).then(res => {
          const data = res.data;
          if (data.error_description) {
            Message({
              message: data.error_description,
              type: 'error'
            })
          } else {
            commit('SET_TOKEN', data.access_token);
            commit('SET_REFRESH_TOKEN', data.refresh_token);
          }
          resolve(res);
        }).catch(error => {
          reject(error);
        })
      })
    },
   }
   
   
   auth.js
   import Cookies from 'js-cookie'
   const TokenKey = 'access-token' //自定义的key
   const RefreshTokenKey = 'refresh-token'
   export function getToken() {
       return Cookies.get(TokenKey)
   }

   export function setToken(token) {
       return Cookies.set(TokenKey, token)
   }

js-cookie的使用

接着在封装的axios请求中通过axios拦截器给请求头添加token

//封装的axios函数
import {getToken} from '@/util/auth';
axios.interceptors.request.use(config => {
    if (getToken() && !isToken) {
        config.headers[website.tokenHeader] = getToken()
  }
 })
 
 axios.interceptors.response.use(res => {
     //如果是401则跳转到登录页面
  if (status === 401) store.dispatch('FedLogOut').then(() =>     router.push({path: '/login'}));
  
 })