文章目錄

• • • 一、準備工作和token
    • • • 1、準備工作
        • 2、介紹token用法
    • 二、創建storage，store，request
    • • • 1、src目錄：
        • 2、封裝storage（可選）
        • 3、創建store
        • 4、創建request
    • 三、配置代理，封裝路由router、設置路由守衛，在main.js中引入router、store
    • • • 一、配置代理
        • 二、封裝路由router，并設置路由守衛
        • 三、在main.js中引入router、store
    • 四、登錄頁面實際使用

適合小白 ?

一、準備工作和token

1、準備工作

• 了解（session，cookie）token
  Token的引入：Token是在客戶端頻繁向服務端請求數據，服務端頻繁的去數據庫查詢用戶名和密碼并進行對比，判斷用戶名和密碼正確與否，并作出相應提示，在這樣的背景下，Token便應運而生。
  token 是在服務端產生的一串字符串，以作客戶端進行請求的一個令牌。如果前端使用用戶名/密碼向服務端請求認證，服務端認證成功，那么在服務端會返回 Token 給前端。前端可以在每次請求的時候帶上 Token 證明自己的合法地位。如果這個 Token 在服務端持久化（比如存入數據庫），那它就是一個永久的身份令牌（除非設置了有效期）。

• token 優點
  Token 完全由應用管理，所以它可以避開同源策略
  Token 可以避免 CSRF 攻擊
  Token 可以是無狀態的，可以在多個服務間共享
  減輕服務器的壓力，減少頻繁的查詢數據庫，使服務器更加健壯。

• 安裝vuex
  cnpm install vuex --save

2、介紹token用法

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

1、第一次登錄的時候，前端調后端的登陸接口，發送用戶名和密碼

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

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

4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面

5、每次調后端接口，都要在請求頭中加token

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

7、如果前端拿到狀態碼為401，就清除token信息并跳轉到登錄頁面
————————————————
版權聲明：本文為CSDN博主「sleepwalker_1992」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sleepwalker_1992/article/details/82974703

二、創建storage，store，request

1、src目錄：

注：

• 封裝storage是可選的，不封裝就用原生的唄；創建store是必須的！
• token一定要存在storage緩存中，否則刷新一下，store會重新被加載，token就沒了；
• 那存在store是不是多余了，這個也是為了數據統一管理吧，也是數據可視化，因為緩存中的數據代碼中是看不見的~

2、封裝storage（可選）

// 封裝操作localstorage本地存儲的方法 模塊化var storage = {set(key, value) {localStorage.setItem(key, JSON.stringify(value));// localStorage.key = value;// localStorage[key] = value;},get(key) {return JSON.parse(localStorage.getItem(key));},getForIndex(index) {return localStorage.key(index);},getKeys(){let items = this.getAll();let keys = [];for (let index=0;index<items.length;index++){keys.push(items[index].key);}return keys;},getLength() {return localStorage.length;},getSupport() {return (typeof (Storage) !== "undefined") ? true : false;},remove(key) {localStorage.removeItem(key);},removeAll() {localStorage.clear();},getAll() {let len = localStorage.length; // 獲取長度let arr = new Array(); // 定義數據集for (var i = 0; i < len; i++) {// 獲取key 索引從0開始var getKey = localStorage.key(i);// 獲取key對應的值var getVal = localStorage.getItem(getKey);// 放進數組arr[i] = {'key': getKey,'val': getVal,}}return arr;} }export default storage;

3、創建store

import Vue from 'vue' import Vuex from 'vuex' import storage from '@/model/storage'Vue.use(Vuex); // 用Vuex.Store對象用來記錄token const store = new Vuex.Store({state: {// 存儲tokentoken:"",userName:"" // 可選},const getters = {getToken(state){return state.token || storage.get("token") || null;} }// 計算屬性mutations: {// 修改token，并將token存入localStoragesetToken(state,token) {state.token = token;storage.set('token', token);console.log('store、localstorage保存token成功！');},delToken(state) {state.token = "";storage.remove("token");},// 可選setUserInfo(state, userName) {state.userName = userName;}} });actions: {// removeToken: (context) => {// context.commit('setToken')// }},export default store;

4、創建request

import axios from 'axios' import store from '@/store' import router from '@/router'// create an axios instance const service = axios.create({// index.js設置了代理(解決跨域) invoice = http://58.246.79.142:25005baseURL: "/invoice", // url = base url + request urltimeout: 5000, // request timeout })//添加請求攔截器，若token存在則在請求頭中加token，不存在也繼續請求 service.interceptors.request.use(config => {// 每次發送請求之前檢測都vuex存有token,那么都要放在請求頭發送給服務器,沒有則不帶token// Authorization是根據后端自定義字段config.headers.Authorization = store.getters.getToken;return config;},error => {console.log("在request攔截器顯示錯誤：", error.response)return Promise.reject(error);} );//respone攔截器 service.interceptors.response.use(response => {// 在status正確的情況下，code不正確則返回對應的錯誤信息（后臺自定義為200是正確，并且將錯誤信息寫在message），正確則返回響應return response.data.code == 200 ? response : Promise.reject(response.data.message);},error => { // 在status不正確的情況下，判別status狀態碼給出對應響應if (error.response) {console.log("在respone攔截器顯示錯誤：", error.response)switch (error.response.status) {case 401://可能是token過期，清除它store.commit("delToken");router.replace({ //跳轉到登錄頁面path: '/login',// 將跳轉的路由path作為參數，登錄成功后跳轉到該路由query: { redirect: router.currentRoute.fullPath }});}}return Promise.reject(error.response.data);} );export default service

三、配置代理，封裝路由router、設置路由守衛，在main.js中引入router、store

一、配置代理

二、封裝路由router，并設置路由守衛

/* eslint-disable */ import Vue from 'vue' import Router from 'vue-router' import Main from '@/main/index'import store from '@/store' import storage from '@/model/storage'Vue.use(Router)const routes = [{path: '/',name: 'Main',redirect: '/login',// 某些頁面規定必須登錄后才能查看 ，可以在router中配置meta，將需要登錄的requireAuth設為true，meta: {requireAuth: true,}},{path: '/login',component: () => import('@/views/login'),},{path: '/invoice',redirect: '/invoice',component: Main,},]},{path: '*',component: Main} ]const router = new Router({ routes: routes })// 設置路由守衛，在進頁面之前，判斷有token，才進入頁面，否則返回登錄頁面 if (storage.get("token")) {store.commit("setToken", storage.get("token")); } router.beforeEach((to, from, next) => {// 判斷要去的路由有沒有requiresAuth// to.matched.some(r => r.meta.requireAuth) or to.meta.requiresAuthif (to.matched.some(r => r.meta.requireAuth)) {if (store.state.token) {next(); //有token,進行request請求，后臺還會驗證token} else {next({path: "/login",// 將剛剛要去的路由path（卻無權限）作為參數，方便登錄成功后直接跳轉到該路由，這要進一步在登陸頁面判斷query: { redirect: to.fullPath } });}} else {next(); //如果無需token,那么隨它去吧} });export default router

三、在main.js中引入router、store

import Vue from 'vue' import App from './App' import router from './router'import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' import store from '@/store'// 兼容ie // import 'babel-polyfill';Vue.use(ElementUI); Vue.config.productionTip = falsenew Vue({el: '#app',router:router,store,components: { App },template: '<App/>' })

四、登錄頁面實際使用

只給出表單提交示例函數和依賴js

import { postLogin } from "@/api/login";submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {let that = this;// console.log('username',this.loginForm.username)// 通過校驗規則后進入校驗用戶名密碼是否正確// 沒有后臺接口可以自定義一個函數來模擬，替換postLoginpostLogin(this.loginForm.username, this.loginForm.password).then(res => {console.log(res);that.$store.commit("setToken", res.data.token);that.$store.commit("setUserInfo", res.data.account);this.$notify({title: "登錄成功",type: "success",showClose: false,duration: 1000});setTimeout(() => {// 此時要判斷/login后面的參數，若無參數，進入主頁；this.$router.push("/index");// 若有參數則參數為未有權限的那個路由，跳轉到那個路由// this.$router.push(***); -- 具體要自己在這實現}, 1000);}).catch(error => {// 錯誤分為 status-請求錯誤 和 code-賬號密碼錯誤this.$message.error(error);console.log(error);});} else {// 不符合前端校驗this.$message.error('format error：'+error);console.log('format error：',error);return false;}});}

上面依賴的@/api/login：

import request from '@/utils/request.js' // 前面封裝的request // 在request中，設置了根路徑/invoice，所以每一個請求都會自動在前面帶上invoice； // 由于在config中的index配置過了代理（監聽）的路徑也是/invoice，但凡遇到/invoice路徑就會替換為target目標地址（后臺接口根地址） // 實現跨域，即不限于只能訪問根路徑為127.0.0.1下的地址 export function postLogin(account,password) {console.log(account,password)return request({url: '/login',method: 'post',params:{// 具體傳參（鍵）要看后臺要求account:account,password:password}}) }

總結

以上是生活随笔為你收集整理的vue项目将token存在（vuex）store和localstorage中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。