import vue from 'vue' //引入vue
import vuex from 'vuex' //引入vuex
// vuex 五个概念
// vuex分为五个大块
// state: 统一定义公共数据(类似于data(){return {a:1, b:2,xxxxxx}})
// mutations : 使用它来修改数据(类似于methods)
// getters: 类似于computed(计算属性,对现有的状态进行计算得到新的数据-------派生 )
// actions: 发起异步请求
// modules: 模块拆分
//使用vuex
vue.use(vuex);
//创建vuex实例
const store=new vuex.Store({
state(){//类似data
return {
//公共的数据,全局作用域。
token:'我是全局作用域的token',
}
},
mutations: {//类似methods
//修改公共数据,本质上是JavaScript函数,专门用来变更store中的数据
//想要修改State中的数据,只能调用Mutation方法,他是Vuex中用来修改公共数据的唯一入口。
//调用时用this.$store.commit('mutation名','荷载')来调用
//mutation必须是同步函数,mutation里面不能放一部代码
xugaitoken(state,obj){
debugger
console.log(obj);
state.token=obj;
},
},
getters:{//类似computer
// state 就是上边定义的公共数据state
getter1(state) {
return '这就是你想要的值:'+state.token;
}
},
action:{
action1(context,obj){
//1.发送异步请求,请求数据
debugger
console.log(obj);
//2.commit调用mutation来修改数据
context.commit('xiugaitoken',obj)
}
},
modules:{
//将上述的5大对象包装进来
modules1: {
// namespaced为true,则在使用mutations时,就必须要加上模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
},
modules2: {
// namespaced不写,默认为false,则在使用mutations时,不需要加模块名
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
},
}
});
export default store //导出store
调用
{{this.$store.commit('xugaitoken', "我是修改之后的token")}}
{{this.$store.dispatch('xugaitoken')}}
{{this.$store.state.token}}
{{this.$store.getters.getter1}}
需求:用户登录成功后将token存在全局的Vuex中,每次http请求时都可以拿到token挂在http请求头中。也可以修改token。
代码实现如下:
this.$http({
headers: {
'deviceCode': 'A95ZEF1-47B5-AC90BF3'
},
method: 'post',
url: _this.api+'/api/Login/Login',
data:_this.Qs.stringify(this.loginForm)
}).then(res => {
if(res.data.code=='200'){
sessionStorage.setItem("currentUserName",res.data.user.userName);
sessionStorage.setItem("currentUserId",res.data.user.userId);
sessionStorage.setItem("Authorization",res.data.user.sessionId);
//添加角色信息存到sessionStorage
sessionStorage.setItem("roleType",res.data.user.userType);
//上面是sessionStorege缓存用户信息(token保密不安全,容易被用户误操作删除),
//下面是使用VUEX储存用户信息。
this.$store.commit('addUserInfo', {
currentUserName:res.data.user.userName,
currentUserId:res.data.user.userId,
Authorization:res.data.user.sessionId,
roleType:res.data.user.userType,
});
this.$router.push('/index');
}else{
this.$message({
message: res.data.result,
type: 'error'
});
}
}).catch(error => {
_this.$message({
message: '请检查账号密码是否正确!',
type: 'warning'
});
console.log(error);
});
VUEX.JS
import vue from 'vue' //引入vue
import vuex from 'vuex' //引入vuex
// vuex 五个概念
// vuex分为五个大块
// state: 统一定义公共数据(类似于data(){return {a:1, b:2,xxxxxx}})
// mutations : 使用它来修改数据(类似于methods)
// getters: 类似于computed(计算属性,对现有的状态进行计算得到新的数据-------派生 )
// actions: 发起异步请求
// modules: 模块拆分
//使用vuex
vue.use(vuex);
// 创建vuex实例
const store=new vuex.Store({
state:{
user:{},
},
mutations: {
//修改公共数据,本质上是JavaScript函数,专门用来变更store中的数据
//想要修改State中的数据,只能调用Mutation方法,他是Vuex中用来修改公共数据的唯一入口。
//调用时用this.$store.commit('mutation名','荷载')来调用
//mutation必须是同步函数,mutation里面不能放异步代码
addUserInfo(state,obj){
state.user=obj;
},
},
getters:{
// state 就是上边定义的公共数据state
getter1(state) {
return state.user;
}
},
actions:{
},
modules:{
//将上述的5大对象包装进来
modules1: {
// namespaced为true,则在使用mutations时,就必须要加上模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
},
modules2: {
// namespaced不写,默认为false,则在使用mutations时,不需要加模块名
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
},
}
});
export default store //导出store
在main.js文件中引用axsios,添加路由拦截(注意一定要在vue实例挂载之后)
/* eslint-disable no-new */
var app=new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
// 添加请求拦截器,在请求头中加token
axios.interceptors.request.use(
config => {
var aa= Request["loginName"];
if (store.state.user.Authorization) {//先去vuex全局作用域找
config.headers.token = store.state.user.Authorization;
}else{//找不到 如sessionstorege找,避免用户误删除。
// if (sessionStorage.getItem('Authorization')) {
// config.headers.token = sessionStorage.getItem('Authorization');
// }
}
return config;
},
error => {
return Promise.reject(error);
});
//在 response 拦截器实现
axios.interceptors.response.use(
res => {
const status = res.data.code;
//如果是未登录
if(status==401 || status=="401"){
app.$alert('登录已超时,请重新登录', '提示', {
confirmButtonText: '确定',
type:'warning',
closeOnClickModal:false,
callback: action => {
app.$router.push('/login');
return;
}
});
}
// if(status=='10010'){
// app.$router.push('/login');
// //window.location.href="http://localhost:8080";
// }
return res;
}, error => {
return Promise.reject(error);
});