學習vue後臺管理框架2(登陸介面)
阿新 • • 發佈：2019-02-17
登陸頁面 src/views/login/index.js
是否展示密碼
showPwd() { //展示密碼
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
}點選登陸按鈕
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) { // store/user.js/LoginByUsername
import { loginByUsername, logout, getUserInfo } from ‘@/api/login’
import { getToken, setToken, removeToken } from ‘@/utils/auth’
‘@/utils/auth’ //@指的是src
//通過Cookie.set設定
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
//請求資料
export function loginByUsername(username, password) {
const data = {
username,
password
}
return request({ //向後臺進行請求 類似於axios.post 詳見下axios
url: '/login/login',
method: 'post',
data
})
/**
* 傳送一個 POST 請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
*/
}
// 使用者名稱登入
LoginByUsername({ commit }, userInfo) {
const username = userInfo.username.trim() //處理傳遞過來的資料
//下面loginByUsername向後臺傳送username,userInfo.password獲得登陸成功或失敗的資料
//成功則設定SET_TOKEN
return new Promise((resolve, reject) => { //返回一個Promise物件
loginByUsername(username, userInfo.password).then(response => {
const data = response.data
commit('SET_TOKEN', data.token) //改變SET_TOKEN的值
setToken(data.token) // 通過 Cookies.set(TokenKey, token)
resolve()
}).catch(error => {
reject(error)
})
})
},上面的作用：登陸的時候 在vuex中儲存使用者資訊token,在cookie中儲存使用者資訊token(許可權)
axios
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
/*
export function getToken() {
return Cookies.get(TokenKey)
}
*/
// create an axios instance
//https://www.cnblogs.com/zhouyangla/p/6753673.html
//建立一個axios例項
const service = axios.create({ //自定義例項預設值
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // request timeout
})
// request interceptor 新增請求攔截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 讓每個請求攜帶token-- ['X-Token']為自定義key 請根據實際情況自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// respone interceptor 新增響應攔截器
service.interceptors.response.use(
response => response, //成功
/**
* 下面的註釋為通過response自定義code來標示請求狀態，當code返回如下情況為許可權有問題，登出並返回到登入頁
* 如通過xmlhttprequest 狀態碼標識 邏輯可寫在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客戶端登入了; 50014:Token 過期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出，可以取消繼續留在該頁面，或者重新登入', '確定登出', {
// confirmButtonText: '重新登入',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 為了重新例項化vue-router物件 避免bug
// });
// })
// }
// return Promise.reject('error');
// } else {
// return response.data;
// }
error => { //失敗
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})
export default service //匯出 import request from '@/utils/request' 被命名為request中英文切換
mutations: {
TOGGLE_SIDEBAR: state => {
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
state.sidebar.opened = !state.sidebar.opened
},
SET_LANGUAGE: (state, language) => { //通過mutations來改變中英文狀態
state.language = language
Cookies.set('language', language)
}
},
actions: {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
setLanguage({ commit }, language) {
// 通過actions來改變中英文狀態 （還是通過commit，呼叫mutations中的方法）
// 只是在這個方法中可以非同步來改變
commit('SET_LANGUAGE', language)
}
}export default {
computed: {
language() {
return this.$store.getters.language; //得到的語言
//getters是 state物件中的
}
},
methods: {
handleSetLanguage(lang) {
// this.$i18n.locale = lang //改變i18n語言種類
// this.$store.dispatch('setLanguage', lang)
// this.$message({
// message: 'switch language success',
// type: 'success'
// }) 這是添加了一個確認按鈕，也要在語言/lang/en.js/cn.js添上對應的語言
this.$confirm(this.$t('confirm.tips'), this.$t('confirm.tips'), {
confirmButtonText: this.$t('confirm.sure'),
cancelButtonText: this.$t('confirm.no'),
type: 'warning'
})
.then(() => {
// let locale = this.$i18n.locale
// locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
this.$i18n.locale = lang; //改變i18n語言種類
this.$store.dispatch('setLanguage', lang);//dispatch 來觸發action中
this.$message({
message: 'switch language success',
type: 'success'
});
})
.catch(() => {
this.$message({
message: 'switch language fail',
type: 'info'
});
});
}
}
};第三方登陸
import openWindow from '@/utils/openWindow'
export default {
name: 'social-signin',
methods: {
wechatHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart) //作者未寫此mutations
const appid = 'xxxxx'
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect')
const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
openWindow(url, thirdpart, 540, 540)
},
tencentHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart)
const client_id = 'xxxxx'
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/authredirect')
const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri
openWindow(url, thirdpart, 540, 540) //開啟一個瀏覽器視窗
}
}
}例如點選微信圖示