develop
pnoker 4 years ago
parent 1c24246631
commit e6fed5d652

@ -1,17 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>DC3 物联万物,智控未来!</title>
<meta name="format-detection" content="telephone=no">
<meta charset="utf-8">
<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 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="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="description" content="DC3,一个基于Spring Cloud的开源的、分布式的物联网(IOT)平台,用于快速开发物联网项目和管理物联设备,是一整套物联系统解决方案。">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>css/animate/3.7.0/animate.min.css">
<title>DC3 物联万物,智控未来!</title>
<style>
html,
body,

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

@ -4,7 +4,6 @@ import store from '@/store/store';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import {failMessage} from '@/util/util'
import {getStore} from "@/util/store";
NProgress.configure({
showSpinner: false
@ -22,9 +21,6 @@ axios.defaults.validateStatus = function (status) {
axios.interceptors.request.use(config => {
NProgress.start();
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;
}, error => {
console.error('Request interceptors:', error);

@ -2,5 +2,6 @@
* 全局配置文件
*/
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 ViewsRouter from './views/index'
import NProgress from "nprogress";
import {checkTokenValid} from "@/api/user";
import store from "@/store/store";
import {getStore} from '@/util/store'
Vue.use(VueRouter);
@ -32,26 +29,7 @@ router.beforeEach((to, from, next) => {
if (meta.title) {
document.title = to.meta.title
}
if (meta.isAuth !== true || from.name === 'login') {
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'})
});
});
}
next();
});
router.afterEach(() => {

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

@ -1,8 +1,22 @@
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 + '-';
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
* @param params

@ -44,10 +44,10 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="profile">个人信息</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>
<span class="span_small avatar">管理员</span>
<span class="span_small avatar">仅供接口调试</span>
</el-col>
</div>
<div class="body">

@ -1,111 +1,124 @@
<template>
<div class="login-container">
<div class="login-wrapper-left animated bounceInDown">
<div class="login-left">
<img class="img" src="images/logo/logo-white.png">
</div>
</div>
<particles/>
<div class="login-wrapper-right animated bounceInDown">
<div class="login-border">
<div class="login-main">
<h4 class="login-title">
Demo Application
</h4>
<p style="text-align: center;">基于 DC3 1.2.3.SR 接口开发的 demo 应用<br/>仅供演示和测试用途!</p>
<el-form class="login-form"
status-icon
:rules="loginRules"
ref="loginForm"
:model="loginForm"
label-width="0">
<el-form-item prop="name">
<el-input size="small"
@keyup.enter.native="handleLogin"
v-model="loginForm.name"
auto-complete="off"
placeholder="请输入用户名">
<i slot="prefix" class="el-icon-user"/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="small"
@keyup.enter.native="handleLogin"
:type="passwordType"
v-model="loginForm.password"
auto-complete="off"
placeholder="请输入密码">
<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
<i slot="prefix" class="el-icon-lock"/>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
size="small"
@click.native.prevent="handleLogin"
class="login-submit">登录
</el-button>
</el-form-item>
</el-form>
<div class="login-container">
<div class="login-wrapper-left animated bounceInDown">
<div class="login-left">
<img class="img" src="images/logo/logo-white.png">
</div>
</div>
<particles/>
<div class="login-wrapper-right animated bounceInDown">
<div class="login-border">
<div class="login-main">
<h4 class="login-title">
Demo Application
</h4>
<p style="text-align: center;">基于 DC3 1.2.3.SR 接口开发的 demo 应用<br/>仅供演示和测试用途!</p>
<el-form class="login-form"
status-icon
:rules="loginRules"
ref="loginForm"
:model="loginForm"
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-input size="small"
@keyup.enter.native="handleLogin"
v-model="loginForm.name"
auto-complete="off"
placeholder="请输入用户名">
<i slot="prefix" class="el-icon-user"/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input size="small"
@keyup.enter.native="handleLogin"
:type="passwordType"
v-model="loginForm.password"
auto-complete="off"
placeholder="请输入密码">
<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
<i slot="prefix" class="el-icon-lock"/>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
size="small"
@click.native.prevent="handleLogin"
class="login-submit">登录
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import particles from "@/components/particles/particles";
import particles from "@/components/particles/particles";
export default {
name: "login",
components: {particles},
data() {
return {
loginForm: {
name: "pnoker",
password: "dc3dc3dc3"
},
loginRules: {
name: [
{required: true, message: "请输入用户名", trigger: "blur"}
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 1, message: "密码长度最少为6位", trigger: "blur"}
]
},
passwordType: "password"
};
},
methods: {
showPassword() {
this.passwordType === ""
? (this.passwordType = "password")
: (this.passwordType = "");
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
let loading = this.$loading({
lock: true,
text: '登录中,请稍后。。。',
spinner: "el-icon-loading"
});
this.$store.dispatch("GenerateSalt", this.loginForm.name).then((salt) => {
this.$store.dispatch("GenerateToken", {salt, user: this.loginForm}).then(() => {
this.$router.push({path: '/'}).then(() => loading.close());
}).catch(() => {
loading.close();
});
}).catch(() => {
loading.close();
});
export default {
name: "login",
components: {particles},
data() {
return {
loginForm: {
tenant: "default",
name: "pnoker",
password: "dc3dc3dc3"
},
loginRules: {
tenant: [
{required: true, message: "请输入租户名", trigger: "blur"}
],
name: [
{required: true, message: "请输入用户名", trigger: "blur"}
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 1, message: "密码长度最少为6位", trigger: "blur"}
]
},
passwordType: "password"
};
},
methods: {
showPassword() {
this.passwordType === ""
? (this.passwordType = "password")
: (this.passwordType = "");
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
let loading = this.$loading({
lock: true,
text: '登录中,请稍后。。。',
spinner: "el-icon-loading"
});
this.$store.dispatch("GenerateSalt", this.loginForm.name).then((salt) => {
this.$store.dispatch("GenerateToken", {salt, ...this.loginForm}).then(() => {
this.$router.push({path: '/'}).then(() => loading.close());
}).catch(() => {
loading.close();
});
}).catch(() => {
loading.close();
});
}
});
}
}
});
}
}
};
};
</script>
<style lang="scss">
@import "~@/assets/styles/login.scss";
@import "~@/assets/styles/login.scss";
</style>

Loading…
Cancel
Save