vue全局配置请求token_关于vue的前端项目中token使用以及验证机制 携带token登录详情 vue-router的跳转说明...

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

//根据api接口获取token

var url = ‘http://www.baidudd.com’ + "/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"]);

vuex中mutations的token保存，也可以是localStorage或者是存在sessionStorage

if (store.state.token) {

this.$router.push('/')

console.log(store.state.token)

} else {

this.$router.replace('/login');

}

——关于vue-router的跳转补充说明——————————————

注意这个replace(‘/login’)是没有历史记录的

router.go(-1或n) 返回history的上一步或者在history的记录里前进或者后退n整数步骤

类似 window.history.go(n)

router.push(‘/home’)

在 history 栈 中 添加一个新的history记录 当用户点击浏览器后退按钮时，则退回之前的 URL。

router.replace(‘login’)

用法和它的方法名一样 —— 替换掉当前的 history 记录。不在history栈里面留有历史记录，在浏览器中不存在前进或者后退的按钮，通常用于带有token验证的登录或注册

————————————————

}).catch(err => {

// this.$message.error(err.status)

this.loading = false

this.loginBtn = "登录"

this.$message.err('账号或密码错误');

// console.log(err)

})

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

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

vuex的使用token的存储，购物车等

export default new Vuex.Store({

state:{

token:' '

},

保存token

mutations:{

set_token(state, token) {

state.token = token

sessionStorage.token = token.//localStorage.token = token

},

删除token

del_token(state) {

state.token = ''

sessionStorage.removeItem('token')

}

}

})

在router/index.js中

// 页面刷新时，重新赋值token

if (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();

}

})

全局默认配置：

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

// 添加请求拦截器

Axios.interceptors.request.use(config => {

// 在发送请求之前做些什么

//判断是否存在token，如果存在将每个页面header都添加token

if(store.state.token){

请求头配置全局token

config.headers.common['Authentication-Token']=store.state.token

}

return config;

}, err => {

// 对请求错误做些什么

return Promise.reject(err);

});

// http response 拦截器

Axios.interceptors.response.use(

response => {

return response;

},

err=> {

if (error.response) {

switch (err.response.status) {

case 401:

this.$store.commit('del_token');

router.replace({

path: '/login',

query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面

})

}

}

return Promise.reject(err.response.data)

});