CLI -- 登錄寫法 · Vue&&TypeSprict--基礎總結

[TOC] >[success] # 登錄代碼案例 ~~~ 1.用戶輸入用戶名密碼 --》后臺返回一個狀態 --》保存這個狀態的token --》輸入url --》判斷有沒有token --》有就走后臺驗證token 接口--》沒有就讓用戶登錄 2.退出后要跳回登錄頁 3.下面的案例對安全性不高的需求使用，高安全的建議后臺設置cookies ~~~ >[info] ## 在lib文件下的util.js 添加獲取和增加cookie的方法 ~~~ 1.需要npm install js-cookie -- 用來操作cookie ~~~ >[danger] ##### setToken -- 添加一個cookie ~~~ 1.當我們從后臺獲取的token驗證的鑰匙，可以存到cookies中 ~~~ ~~~ export const setToken = (token, tokenName = 'token') => { Cookies.set(tokenName, token) } ~~~ >[danger] ##### getToken -- 獲得cookie中的token ~~~ 1.當我們從獲取保存在cookie中的token時候 ~~~ ~~~ export const getToken = (tokenName = 'token') => { return Cookies.get(tokenName) } ~~~ >[info] ## 對lib文件下的axios進行改造 ~~~ 1.和之前代碼不同點，這里請求攔截的時候配置了一個請求頭，這個請求頭傳遞token，后臺人員獲取這個請求頭中的token 來判斷token是否失效，或者真假'config.headers['Authorization'] = getToken()' 2.好處是當我們使用其他接口的時候，每次請求自動拼接在請求頭中，不用在每個接口使用的時候都傳遞token 3.因為要在請求頭傳遞token，所以這里面使用了，在lib文件夾下的util.js，中的getToken 方法 ~~~ >[danger] ##### 改造后的代碼 ~~~ import axios from 'axios' import { baseURL } from '@/config' import { getToken } from '@/lib/util' class HttpRequest { constructor (baseUrl = baseURL) { this.baseUrl = baseUrl this.queue = {} } getInsideConfig () { const config = { baseURL: this.baseUrl, headers: { // } } return config } distroy (url) { delete this.queue[url] if (!Object.keys(this.queue).length) { // Spin.hide() } } interceptors (instance, url) { instance.interceptors.request.use(config => { // 添加全局的loading... if (!Object.keys(this.queue).length) { // Spin.show() } this.queue[url] = true config.headers['Authorization'] = getToken() return config }, error => { return Promise.reject(error) }) instance.interceptors.response.use(res => { this.distroy(url) const { data } = res return data }, error => { this.distroy(url) return Promise.reject(error) }) } request (options) { const instance = axios.create() options = Object.assign(this.getInsideConfig(), options) this.interceptors(instance, options.url) return instance(options) } } export default HttpRequest ~~~ >[info] ## 編寫api 文件夾下的user.js中文件的登陸接口 ~~~ 1.我們將有關用戶的接口，都維護到user.js 文件件中 ~~~ >[danger] ##### 登陸接口 ~~~ export const login = ({ userName, password }) => { return axios.request({ url: '/index/login', method: 'post', data: { userName, password } }) } ~~~ >[info] ## 編寫api 文件夾下的user.js中文件的token驗證接口 ~~~ 1.每次訪問視圖組建時候，需要我們去調用這個接口，也是后臺提供一個驗證，登陸是否失效和正確的預留接口 ~~~ >[danger] ##### 驗證token接口 ~~~ export const authorization = () => { return axios.request({ url: '/users/authorization', method: 'get' }) } ~~~ >[info] ## 在store 文件下moudule文件夾下的user.js文件 ~~~ 1.在vuex 中調用登陸接口，為了讓項目更茁壯在store 文件夾下創建了，一個負責個個模塊的module 文件夾，再里面創建了一個user.js 文件專門保存用戶模塊的vuex 2.因為登陸是異步請求，因此使用vuex中的actions方法去調用接口 3.下面'login' 方法返回的是一個'Promise'對象，因為請求調用的接口是異步的，所以我們將這個異步封裝到'Promise'在使用的時候可以更加方便 4.commit 是文檔中說的載荷也是用來控制mutations一個方法 5.catch抓的不是200 status 會走catch里面 6.登陸成功需要使用我們封裝的setToken ，將token存進cookie中 7.'authorization ' token是正確的就給他重新賦值一個cookie ~~~ >[danger] ##### user.js 內容一個是調用登陸接口，一個是驗證token接口，一個注銷方法 ~~~ import { login, authorization } from '@/api/user' import { setToken } from '@/lib/util' const state = { userName: 'Lison' } const getters = { firstLetter: (state) => { return state.userName.substr(0, 1) } } const mutations = { SET_USER_NAME (state, params) { state.userName = params } } const actions = { updateUserName ({ commit, state, rootState, dispatch }) { // rootState.appName }, login ({ commit }, { userName, password }) { return new Promise((resolve, reject) => { login({ userName, password }).then(res => { if (res.code === 200 && res.data.token) { setToken(res.data.token) resolve() } else { reject(new Error('錯誤')) } }).catch(error => { reject(error) }) }) }, authorization ({ commit }, token) { return new Promise((resolve, reject) => { authorization().then(res => { if (parseInt(res.code) === 401) { reject(new Error('token error')) } else { setToken(res.data.token) resolve() } }).catch(error => { reject(error) }) }) }, logout () { setToken('') } } export default { getters, state, mutations, actions, modules: { // } } ~~~ >[info] ## 視圖組件login.vue中使用 ~~~ 1....mapActions是快速使用vuex 中actions 里面的方法 2.用戶登錄成功用'this.$router.push'就跳轉到首頁 ~~~ >[danger] ##### 代碼 ~~~ <template> <div> <input v-model="userName" /> <input type="password" v-model="password"/> <button @click="handleSubmit">登錄</button> </div> </template> <script> import { mapActions } from 'vuex' export default { name: 'login_page', data () { return { userName: '', password: '' } }, methods: { ...mapActions([ 'login' ]), handleSubmit () { this.login({ userName: this.userName, password: this.password }).then(() => { console.log('success!!') this.$router.push({ name: 'home' }) }).catch(error => { console.log(error) }) } } } </script> ~~~ >[info] ## 在router文件下的index.js 做路由攔截 ~~~ 1.先調用封裝的'getToken' 方法判斷token是否存在cookie中 2.如果存在調用在'vuex' actions 方法存在的'authorization' 方法，這個方法需要接受一個參數'token',vuex 中的這個方法實際調用的是一個后臺，接口方法，這個方法用來判斷當前token是否正確 3.如果不正確一定要清除當前的cookie中保存的token ~~~ >[danger] ##### 代碼 ~~~ import Vue from 'vue' import Router from 'vue-router' import routes from './router' import store from '@/store' import { setTitle, setToken, getToken } from '@/lib/util' Vue.use(Router) const router = new Router({ routes }) const HAS_LOGINED = false router.beforeEach((to, from, next) => { to.meta && setTitle(to.meta.title) // if (to.name !== 'login') { // if (HAS_LOGINED) next() // else next({ name: 'login' }) // } else { // if (HAS_LOGINED) next({ name: 'home' }) // else next() // } const token = getToken() if (token) { store.dispatch('authorization', token).then(() => { if (to.name === 'login') next({ name: 'home' }) else next() }).catch(() => { setToken('') next({ name: 'login' }) }) } else { if (to.name === 'login') next() else next({ name: 'login' }) } }) export default router ~~~