develop
pnoker 3 years ago
parent 1c24246631
commit e6fed5d652

@ -1,17 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>DC3 物联万物,智控未来!</title> <meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="description" content="DC3,一个基于Spring Cloud的开源的、分布式的物联网(IOT)平台,用于快速开发物联网项目和管理物联设备,是一整套物联系统解决方案。"> <meta name="description" content="DC3,一个基于Spring Cloud的开源的、分布式的物联网(IOT)平台,用于快速开发物联网项目和管理物联设备,是一整套物联系统解决方案。">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>css/animate/3.7.0/animate.min.css"> <link rel="stylesheet" href="<%= BASE_URL %>css/animate/3.7.0/animate.min.css">
<title>DC3 物联万物,智控未来!</title>
<style> <style>
html, html,
body, body,

@ -2,32 +2,24 @@ import request from '@/config/axios'
export const generateSalt = (name) => request({ export const generateSalt = (name) => request({
url: 'user_api/auth/token/salt', url: 'user_api/auth/token/salt',
method: 'get', method: 'post',
params: { data: name
username: name
}
}); });
export const generateToken = (user) => request({ export const generateToken = (login) => request({
url: 'user_api/auth/token/generate', url: 'user_api/auth/token/generate',
method: 'post', method: 'post',
data: user data: login
}); });
export const checkTokenValid = (user, salt, token) => request({ export const checkTokenValid = (login) => request({
url: 'user_api/auth/token/check', url: 'user_api/auth/token/check',
method: 'get', method: 'post',
params: { data: login
username: user,
salt,
token
}
}); });
export const cancelToken = (name) => request({ export const cancelToken = (name) => request({
url: 'user_api/auth/token/cancel', url: 'user_api/auth/token/cancel',
method: 'get', method: 'post',
params: { data: name
username: name
}
}); });

@ -4,7 +4,6 @@ import store from '@/store/store';
import NProgress from 'nprogress' import NProgress from 'nprogress'
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import {failMessage} from '@/util/util' import {failMessage} from '@/util/util'
import {getStore} from "@/util/store";
NProgress.configure({ NProgress.configure({
showSpinner: false showSpinner: false
@ -22,9 +21,6 @@ axios.defaults.validateStatus = function (status) {
axios.interceptors.request.use(config => { axios.interceptors.request.use(config => {
NProgress.start(); NProgress.start();
config.headers['Content-Type'] = 'application/json'; config.headers['Content-Type'] = 'application/json';
config.headers['X-Auth-Salt'] = getStore({name: 'salt'}) || '';
config.headers['X-Auth-User'] = getStore({name: 'user'}) || '';
config.headers['X-Auth-Token'] = getStore({name: 'token'}) || '';
return config; return config;
}, error => { }, error => {
console.error('Request interceptors:', error); console.error('Request interceptors:', error);

@ -2,5 +2,6 @@
* 全局配置文件 * 全局配置文件
*/ */
export default { export default {
key: 'dc3' key: 'dc3',
token_header: 'X-Auth-Token'
} }

@ -3,9 +3,6 @@ import VueRouter from 'vue-router'
import CommonRouter from './common/index' import CommonRouter from './common/index'
import ViewsRouter from './views/index' import ViewsRouter from './views/index'
import NProgress from "nprogress"; import NProgress from "nprogress";
import {checkTokenValid} from "@/api/user";
import store from "@/store/store";
import {getStore} from '@/util/store'
Vue.use(VueRouter); Vue.use(VueRouter);
@ -32,26 +29,7 @@ router.beforeEach((to, from, next) => {
if (meta.title) { if (meta.title) {
document.title = to.meta.title document.title = to.meta.title
} }
if (meta.isAuth !== true || from.name === 'login') {
next(); next();
} else {
const token = getStore({name: 'token'}), salt = getStore({name: 'salt'}), user = getStore({name: 'user'});
if ('' === token || undefined === token || '' === user || undefined === user) {
next({path: '/login'});
return;
}
checkTokenValid(user, salt, token).then(res => {
if (res.ok) {
next();
} else {
throw new Error(res.message);
}
}).catch(() => {
store.dispatch('ClearToken').then(() => {
next({path: '/login'})
});
});
}
}); });
router.afterEach(() => { router.afterEach(() => {

@ -1,19 +1,16 @@
import md5 from 'js-md5'; import md5 from 'js-md5';
import {getStore, removeStore, setStore} from '@/util/store'
import {getStore, removeCookies, removeStore, setCookies, setStore} from '@/util/store'
import {cancelToken, generateSalt, generateToken} from '@/api/user' import {cancelToken, generateSalt, generateToken} from '@/api/user'
import website from "@/config/website";
const user = { const user = {
state: { state: {},
salt: getStore({name: 'salt'}) || '',
user: getStore({name: 'user'}) || '',
token: getStore({name: 'token'}) || '',
},
actions: { actions: {
GenerateSalt({commit}, name) { GenerateSalt({commit}, name) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
generateSalt(name).then(res => { generateSalt(name).then(res => {
commit('SET_SALT', res.data);
commit('SET_USER', name);
resolve(res.data); resolve(res.data);
}).catch(error => { }).catch(error => {
reject(error); reject(error);
@ -21,14 +18,23 @@ const user = {
}); });
}, },
GenerateToken({commit}, form) { GenerateToken({commit}, form) {
let user = { let login = {
name: form.user.name, tenant: form.tenant,
password: md5(md5(form.user.password) + form.salt) name: form.name,
salt: form.salt,
password: md5(md5(form.password) + form.salt)
}; };
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
generateToken(user).then(res => { generateToken(login).then(res => {
const data = res.data; const data = res.data;
commit('SET_TOKEN', data); commit('SET_TOKEN',
{
tenant: login.tenant,
name: login.name,
salt: login.salt,
token: data
}
);
resolve(); resolve();
}).catch(error => { }).catch(error => {
reject(error); reject(error);
@ -36,42 +42,24 @@ const user = {
}); });
}, },
ClearToken({commit}) { ClearToken({commit}) {
return new Promise((resolve, reject) => { return new Promise((resolve) => {
cancelToken(getStore({name: 'user'})).then((res) => { let token = getStore(website.token_header);
commit('REMOVE_SALT'); if (token && token.name) {
commit('REMOVE_USER'); cancelToken(token.name);
}
commit('REMOVE_TOKEN'); commit('REMOVE_TOKEN');
resolve(res); resolve();
}).catch(error => {
reject(error);
});
}); });
} }
}, },
mutations: { mutations: {
SET_SALT: (state, salt) => {
state.salt = salt;
setStore({name: 'salt', content: state.salt});
},
REMOVE_SALT: (state) => {
state.salt = '';
removeStore({name: 'salt'});
},
SET_USER: (state, user) => {
state.user = user;
setStore({name: 'user', content: state.user});
},
REMOVE_USER: (state) => {
state.user = '';
removeStore({name: 'user'});
},
SET_TOKEN: (state, token) => { SET_TOKEN: (state, token) => {
state.token = token; setCookies(website.token_header, token);
setStore({name: 'token', content: state.token}); setStore(website.token_header, token);
}, },
REMOVE_TOKEN: (state) => { REMOVE_TOKEN: () => {
state.token = ''; removeCookies(website.token_header);
removeStore({name: 'token'}); removeStore(website.token_header);
} }
} }
}; };

@ -1,8 +1,22 @@
import {isNull} from './validate'; import {isNull} from './validate';
import website from '@/config/website' import website from '@/config/website';
import Cookies from "js-cookie";
import {decode, encode} from 'js-base64'
const keyName = website.key + '-'; const keyName = website.key + '-';
export function getCookies(key) {
return JSON.parse(decode(Cookies.get(key)));
}
export function setCookies(key, value) {
return Cookies.set(key, encode(JSON.stringify(value)));
}
export function removeCookies(key) {
return Cookies.remove(key);
}
/** /**
* 存储 localStorage * 存储 localStorage
* @param params * @param params

@ -44,10 +44,10 @@
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="profile">个人信息</el-dropdown-item> <el-dropdown-item command="profile">个人信息</el-dropdown-item>
<el-dropdown-item command="help">帮助</el-dropdown-item> <el-dropdown-item command="help">帮助</el-dropdown-item>
<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item> <el-dropdown-item command="logout" divided disabled>退出登录</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<span class="span_small avatar">管理员</span> <span class="span_small avatar">仅供接口调试</span>
</el-col> </el-col>
</div> </div>
<div class="body"> <div class="body">

@ -19,6 +19,15 @@
ref="loginForm" ref="loginForm"
:model="loginForm" :model="loginForm"
label-width="0"> label-width="0">
<el-form-item prop="tenant">
<el-input size="small"
@keyup.enter.native="handleLogin"
v-model="loginForm.tenant"
auto-complete="off"
placeholder="请输入租户名">
<i slot="prefix" class="el-icon-suitcase"/>
</el-input>
</el-form-item>
<el-form-item prop="name"> <el-form-item prop="name">
<el-input size="small" <el-input size="small"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
@ -53,18 +62,22 @@
</div> </div>
</template> </template>
<script> <script>
import particles from "@/components/particles/particles"; import particles from "@/components/particles/particles";
export default { export default {
name: "login", name: "login",
components: {particles}, components: {particles},
data() { data() {
return { return {
loginForm: { loginForm: {
tenant: "default",
name: "pnoker", name: "pnoker",
password: "dc3dc3dc3" password: "dc3dc3dc3"
}, },
loginRules: { loginRules: {
tenant: [
{required: true, message: "请输入租户名", trigger: "blur"}
],
name: [ name: [
{required: true, message: "请输入用户名", trigger: "blur"} {required: true, message: "请输入用户名", trigger: "blur"}
], ],
@ -91,7 +104,7 @@ export default {
spinner: "el-icon-loading" spinner: "el-icon-loading"
}); });
this.$store.dispatch("GenerateSalt", this.loginForm.name).then((salt) => { this.$store.dispatch("GenerateSalt", this.loginForm.name).then((salt) => {
this.$store.dispatch("GenerateToken", {salt, user: this.loginForm}).then(() => { this.$store.dispatch("GenerateToken", {salt, ...this.loginForm}).then(() => {
this.$router.push({path: '/'}).then(() => loading.close()); this.$router.push({path: '/'}).then(() => loading.close());
}).catch(() => { }).catch(() => {
loading.close(); loading.close();
@ -103,9 +116,9 @@ export default {
}); });
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import "~@/assets/styles/login.scss"; @import "~@/assets/styles/login.scss";
</style> </style>

Loading…
Cancel
Save