<input v-model="loginForm.username" placeholder="请输入用户名/手机号" />
<p class="user-error" v-if="!loginForm.username&&none">用户名/手机号不能为空</p>
<input type="password" v-model="loginForm.password" placeholder="请输入密码" />
<p class="password-error" v-if="!loginForm.password&&none">密码不能为空</p>
<button type="submit" @click="loginIn" >登陆</button>
<script>
import { mapMutations } from 'vuex'
import axios from "axios"
import qs from "qs"
export default {
data(){
return{
none: false,
loginForm: {
username: '',
password: ''
}
}
},
methods:{
...mapMutations(['changeLogin']),
loginIn(){
this.none=true
let _this = this;
if (!this.loginForm.username || !this.loginForm.password) {
return ''
}else{
let para={
loginName:this.loginForm.username,
passWord:this.loginForm.password
};
axios.post(`${axios.defaults.baseURL7}/login`,qs.stringify(para))
.then(res=>{
if(res.data.status){
_this.userToken=res.data.data
// 将用户token保存到vuex中
_this.changeLogin({ Authorization: _this.userToken });
this.$router.push({path:"/home"})
}else{
this.$message.error(res.data.msg)
}
})
}
}
}
}
</script>
2.store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 存储token
Authorization: sessionStorage.getItem('Authorization') ? sessionStorage.getItem('Authorization') : ''
},
mutations: {
// 修改token,并将token存入localStorage
changeLogin (state, user) {
state.Authorization = user.Authorization;
sessionStorage.setItem('Authorization', user.Authorization);
}
}
})
2、main.js中请求头添加token
// 在请求头中加token
axios.interceptors.request.use(
config => {
// 判断是否存在token,若是存在的话,则每一个http header都加上token
let token = sessionStorage.getItem('Authorization')
if (!config.headers.hasOwnProperty('Authorization') && token) {
config.headers.Authorization = token;
}
return config;
},
error => {
return Promise.reject(error);
});
3、路由导航守卫
1.在router.js中添加
import Vue from 'vue';
import Router from 'vue-router';
import login from '@/components/login';
import home from '@/components/home';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
component: home
}
]
});
//导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登录
router.beforeEach((to, from, next) => {
//debugger
if (to.path === '/login') {
next();
} else {
let token = sessionStorage.getItem('Authorization');
if (!token) {
next('/login');
} else {
next();
}
}
});