在前后端完全分離的情況下，Vue項目中實現(xiàn)token驗證大致思路如下：

1、第一次登錄的時候，前端調(diào)后端的登陸接口，發(fā)送用戶名和密碼

2、后端收到請求，驗證用戶名和密碼，驗證成功，就給前端返回一個token

3、前端拿到token，將token存儲到localStorage和vuex中，并跳轉(zhuǎn)路由頁面

4、前端每次跳轉(zhuǎn)路由，就判斷 localStroage 中有無 token ，沒有就跳轉(zhuǎn)到登錄頁面，有則跳轉(zhuǎn)到對應(yīng)路由頁面

5、每次調(diào)后端接口，都要在請求頭中加token

6、后端判斷請求頭中有無token，有token，就拿到token并驗證token，驗證成功就返回數(shù)據(jù)，驗證失敗（例如：token過期）就返回401，請求頭中沒有token也返回401

7、如果前端拿到狀態(tài)碼為401，就清除token信息并跳轉(zhuǎn)到登錄頁面

vue-cli搭建一個項目，簡單說明前端要做的事：

• 一、調(diào)登錄接口成功，在回調(diào)函數(shù)中將token存儲到localStorage和vuex中

login.vue

<template> <div> <input type="text" v-model="loginForm.username" placeholder="用戶名"/> <input type="text" v-model="loginForm.password" placeholder="密碼"/> <button @click="login">登錄</button> </div></template> <script>import { mapMutations } from 'vuex';export default { data () { return { loginForm: { username: '', password: '' } }; }, methods: { ...mapMutations(['changeLogin']), login () { let _this = this; 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); }); } } }};</script>

store文件夾下的index.js

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;

• 二、路由導航守衛(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 } ]}); // 導航守衛(wèi)// 使用 router.beforeEach 注冊一個全局前置守衛(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;

• 三、請求頭加token

// 添加請求攔截器，在請求頭中加tokenaxios.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)到登錄頁面

localStorage.removeItem('Authorization'); this.$router.push('/login');

總結(jié)

以上是生活随笔為你收集整理的wegame每次登陆都要滑动验证_Vue项目中实现用户登录及token验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。