1.用戶第一次登錄，調用后端登錄接口，發送用戶名和密碼
2.后端驗證用戶名和密碼是否正確，成功則返回token，
3.前端拿到token,將token存儲在localStorge()和vuex中，並跳轉到主頁
4.前端每次跳轉路由就判斷localStorge中是否有token,沒有就跳轉到登錄頁
5.每次調用后端，都要在請求頭部添加token
6.后端判斷是否有token,有token，就驗證token，驗證成功就返回數據，驗證失敗，token過期，或沒有就返回401
7.前端如果，拿到401就清除token並跳轉到登錄頁，
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="用戶名"/>
<input type="text" v-model="loginForm.password" placeholder="密碼"/>
<button @click="login">登錄</button>
</div>
</template>
export default {
data () {
return {
loginForm: {
username: '',
password: '' }
};
},
methods: {
...mapMutations(['changeLogin']),
login () {
let _this =this;
/////判讀賬號密碼是否輸入，沒有則alert 出來
if(this.loginForm.username === '' ||this.loginForm.password === '') {
alert('賬號或密碼不能為空');
} else {
this.axios({
method: 'post',
url: '/user/login',
data: _this.loginForm
}).then(res => {
console.log(res.data);
_this.userToken = 'Bearer ' + res.data.data.body.token;
// 將用戶token保存到vuex中 _this.changeLogin({ Authorization: _this.userToken });
_this.$router.push('/home');
alert('登陸成功');
}).catch(error => {
alert('賬號或密碼錯誤');
console.log(error);
});
}
}
}
};
在store文件夾下的index.js 添加 token import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { // 存儲token Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '' }, mutations: { // 修改token，並將token存入localStorage changeLogin (state, user) { state.Authorization = user.Authorization; localStorage.setItem('Authorization', user.Authorization); } } }); export default store;
配置路由導航守衛 router文件夾下的index.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) => { if (to.path === '/login') { next(); } else { let token = localStorage.getItem('Authorization'); if (token === 'null' || token === '') { next('/login'); } else { next(); } } }); export default router;
請求頭加token 在 main.js中添加 // 添加請求攔截器，在請求頭中加token axios.interceptors.request.use( config => { if (localStorage.getItem('Authorization')) { config.headers.Authorization = localStorage.getItem('Authorization'); } return config; }, error => { return Promise.reject(error); });
如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面 localStorage.removeItem('Authorization'); this.$router.push('/login'); 鏈接：https://www.jianshu.com/p/32e6eb23147f