Vue获取浏览器携带ticket参数，调用请求获取token存储本地

可是我还饿啊

已于 2023-07-24 14:10:25 修改

阅读量1.7k

点赞数 1

文章标签：前端 vue vue.js

于 2023-04-07 15:13:21 首次发布

本文链接：https://blog.csdn.net/m0_55627541/article/details/130011844

版权

思路：

当进入页面时，一般是login页面，在这里进行token获取并将token存储到localStorage，存储之后定义全局配置state(所有共享的数据放在这里)，修改axios.interceptors.request.use()方法，使其在请求时携带token。（细化的没做：比如设置路由守卫：如果token失效或者无token返回登陆页。）

具体步骤如下：

1.通过mounted进行方法调用(表示进入该页面首先运行的方法)，方法中包含浏览器url的截取，ajax的调用(获取token),写入全局配置(store)。

我这里需要先截取浏览器url上面的ticket，然后发送ajax请求获取token，跟直接从后端获取token一样的形式。getTicket()方法是我定义的截取字符串的方法。

 mounted(){
    this.getToken();
  },
  methods: {
    // 获取token
    getToken(){
      var name = 'ticket';
      // 获取ticket
      var ticket = getTicket(name)
      if(ticket != null){
        this.$axios.get("获取Token的路径"+ ticket)
        .then(response=>{
           // response.data.data.token：取到返回的token
          store.commit('changeLogin',{ Authorization: response.data.data.token});
        })
      }else{
        alert("Ticket为空,请刷新页面或重新进入")
      }     
    }
}

getTicket()方法如下

  export function getTicket(name){
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substring(1).match(reg);
        if (r != null) {
          return decodeURIComponent(r[2]);
        }
        return null;
  }

2.通过Vuex进行全局配置加载，在store->index.js中将获取到的token存入localStorage，定义state数据共享，对于Vuex，不允许直接修改store内的数据,因此通过Mutation变更Store中的数据。

const store = new Vuex.Store({
  state: {
    // 存储 token
    Authorization: localStorage.getItem('Authorization')?localStorage.getItem('Authorization') : ''
},

mutations: {
    changeLogin (state, user) {
        state.Authorization = user.Authorization;
        localStorage.setItem('Authorization', user.Authorization);
    }
}

3.在每次请求数据时携带token，用到了request.js里面axios.interceptors.request.use 拦截器。

axios.interceptors.request.use(
config => {
  if (store.state.Authorization != null &&  store.state.Authorization != "") {
      // 请求头的 Authorization 加上 token 数据
      config.headers.Authorization = store.state.Authorization;
  }else {
      console.log('no token');
  }
  return config;
},
error => {
  console.log('error in request');
  return Promise.reject(error);
}
);

思路最重要，觉得有用点个赞吧