首页 > 编程 > JavaScript > 正文

在vue中获取token,并将token写进header的方法

2019-11-19 12:51:01
字体:
来源:转载
供稿:网友

需要准备的东西:Vue+axios+Vuex+Vue-router

1.在login.vue中通过发送http请求获取token

//根据api接口获取tokenvar url = this.HOST + "/session";this.$axios.post(url, {username: this.loginForm.username,password: this.loginForm.pass}).then(res => {// console.log(res.data);this.$message.success('登录成功');let data = res.data;//根据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('/')console.log(store.state.token)} else {this.$router.replace('/login');} }).catch(error => {// this.$message.error(error.status)this.loading = falsethis.loginBtn = "登录"this.$message.error('账号或密码错误');// console.log(error) })

2.在store.js中对token状态进行监管

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 = tokensessionStorage.token = token},del_token(state) {state.token = ''sessionStorage.removeItem('token')}}})

3.在router/index.js中

// 页面刷新时,重新赋值tokenif (sessionStorage.getItem('token')) {store.commit('set_token', sessionStorage.getItem('token'))} const router = new Router({mode: "history",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();}})

4.在main.js中定义全局默认配置:

Axios.defaults.headers.common['Authentication-Token'] = store.state.token;

5.在src/main.js添加拦截器

// 添加请求拦截器Axios.interceptors.request.use(config => {// 在发送请求之前做些什么//判断是否存在token,如果存在将每个页面header都添加tokenif(store.state.token){config.headers.common['Authentication-Token']=store.state.token} return config;}, error => {// 对请求错误做些什么return Promise.reject(error);}); // http response 拦截器Axios.interceptors.response.use(response => { return response;},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.response.data)});

以上这篇在vue中获取token,并将token写进header的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表