1.1data
data: function () {
return {
userToken: '',
userID: '',
param: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
};
},
1.2methods
methods: {
...mapMutations(['changeLogin', 'changeLoginId']),
submitForm() {
let obj = {
userName: this.param.username,
pwd: this.param.password
};
this.$refs.login.validate((valid) => {
if (valid) {
this.$post('/admin/login/index', obj).then((response) => {
if (response.code == 0) {
this.$message.success('登录成功');
this.userToken = response.data.token;
this.userID = response.data.id;
this.changeLogin({ Authorization: this.userToken });
this.changeLoginId({ AuthorizationID: this.userID });
this.$router.push({
path: '/dashboard'
});
}
});
} else {
this.$message.error('请输入账号和密码');
console.log('error submit!!');
return false;
}
});
}
}
axios.interceptors.request.use(
config => {
if (window.localStorage.getItem('Authorization') && window.localStorage.getItem('AuthorizationID')) {
config.headers.common['X-Token'] = window.localStorage.getItem('Authorization');
config.headers.common['X-Adminid'] = window.localStorage.getItem('AuthorizationID');
} else {
console.log(config);
}
console.log(config, 'console.log(config);');
return config;
},
error => {
return Promise.reject(error);
}
);
import { post, fetch, patch, put } from './utils/request';
Vue.prototype.$post = post;
Vue.prototype.$fetch = fetch;
Vue.prototype.$patch = patch;
Vue.prototype.$put = put;
main.js
import store from './store/index';
new Vue({
router,
i18n,
store,
render: h => h(App)
}).$mount('#app');
router.js
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);
return originalPush.call(this, location).catch(err => err);
};
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('Authorization');
if (token) {
next();
} else {
next('/login');
}
}
});
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
userId: localStorage.getItem('AuthorizationID') ? localStorage.getItem('AuthorizationID') : '',
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
},
mutations: {
changeLogin(state, user) {
state.Authorization = user.Authorization;
localStorage.setItem('Authorization', user.Authorization);
},
changeLoginId(state, user) {
state.userId = user.Authorization;
localStorage.setItem('AuthorizationID', user.AuthorizationID);
}
}
});
临时笔记 后期备注 有错望纠正 感谢。