在前后端完全分離的情況下舅世，Vue項(xiàng)目中實(shí)現(xiàn)token驗(yàn)證大致思路如下：
1浪慌、第一次登錄的時(shí)候冤荆，前端調(diào)后端的登陸接口，發(fā)送用戶名和密碼
2权纤、后端收到請(qǐng)求钓简，驗(yàn)證用戶名和密碼，驗(yàn)證成功汹想，就給前端返回一個(gè)token
3外邓、前端拿到token，將token存儲(chǔ)到localStorage和vuex中古掏，并跳轉(zhuǎn)路由頁(yè)面
4损话、前端每次跳轉(zhuǎn)路由，就判斷 localStroage 中有無(wú) token 槽唾，沒有就跳轉(zhuǎn)到登錄頁(yè)面丧枪，有則跳轉(zhuǎn)到對(duì)應(yīng)路由頁(yè)面
5、每次調(diào)后端接口庞萍，都要在請(qǐng)求頭中加token
6拧烦、后端判斷請(qǐng)求頭中有無(wú)token，有token钝计，就拿到token并驗(yàn)證token恋博，驗(yàn)證成功就返回?cái)?shù)據(jù)齐佳，驗(yàn)證失敗（例如：token過期）就返回401债沮，請(qǐng)求頭中沒有token也返回401
7炼吴、如果前端拿到狀態(tài)碼為401，就清除token信息并跳轉(zhuǎn)到登錄頁(yè)面
vue-cli搭建一個(gè)項(xiàng)目疫衩，簡(jiǎn)單說明前端要做的事：
一硅蹦、調(diào)登錄接口成功，在回調(diào)函數(shù)中將token存儲(chǔ)到localStorage和vuex中
login.vue
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
? state: {
? ? // 存儲(chǔ)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;
二提针、路由導(dǎo)航守衛(wèi)
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
? ? }
? ]
});
// 導(dǎo)航守衛(wèi)
// 使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)，判斷用戶是否登陸
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;
三曹傀、請(qǐng)求頭加token
// 添加請(qǐng)求攔截器辐脖，在請(qǐng)求頭中加token
axios.interceptors.request.use(
? config => {
? ? if (localStorage.getItem('Authorization')) {
? ? ? config.headers.Authorization = localStorage.getItem('Authorization');
? ? }
? ? return config;
? },
? error => {
? ? return Promise.reject(error);
? });
四、如果前端拿到狀態(tài)碼為401皆愉，就清除token信息并跳轉(zhuǎn)到登錄頁(yè)面
????? localStorage.removeItem('Authorization');
? ? ? this.$router.push('/login');
