登录完成
This commit is contained in:
xiayuping666
@@ -20,6 +20,7 @@
|
||||
"dingtalk-jsapi": "^3.0.20",
|
||||
"echarts": "5.2.2",
|
||||
"element-ui": "2.15.6",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"nprogress": "0.2.0",
|
||||
"screenfull": "5.2.0",
|
||||
"serve": "^14.2.0",
|
||||
|
||||
@@ -10,6 +10,8 @@ import setIntroduction from "@/utils/setIconfont.js";
|
||||
import { Local } from "@/utils/storage.js";
|
||||
import Setings from "@/layout/navBars/breadcrumb/setings.vue";
|
||||
import Upgrade from "@/layout/upgrade/index.vue";
|
||||
import jsonwebtoken from 'jsonwebtoken'
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: { Setings, Upgrade },
|
||||
@@ -17,6 +19,10 @@ export default {
|
||||
this.initSetIconfont();
|
||||
this.openSetingsDrawer();
|
||||
this.getLayoutThemeConfig();
|
||||
console.log('jsonwebtoken')
|
||||
const token = 'eyJ4NXQjUzI1NiI6IkRIS0NvOTNWbURZd0tRNk5xX3BEOFdnNDUtRTBzQ2h6c3VKNThjbmVzeDAiLCJraWQiOiJkc3dqIiwiYWxnIjoiUlMyNTYifQ.eyJjYW1wdXNJbmZvIjpbeyJjYW1wdXNJZCI6ODUxNDY2OTMyLCJjYW1wdXNOYW1lIjoi6IOW6IOW5pWZ6IKy6ZuG5ZuiIiwiY2xhc3NJbmZvIjpbeyJjbGFzc0lkIjo4NTEzODI3ODYsImNsYXNzTmFtZSI6IuWkp-ePrTHnj60iLCJjbGFzc1JvbGVMaXN0IjpbeyJyb2xlIjoiZ3VhcmRpYW4iLCJpc0FkdmlzZXIiOjB9LHsicm9sZSI6InRlYWNoZXIiLCJpc0FkdmlzZXIiOjB9XX1dfV0sInN1YiI6IuW8oOS4iSIsImlzcyI6Imh0dHA6Ly9hdXRoLmNwb2xhci5jbiIsInVzZXJpZCI6IjIxMzE1ODQ2MzkzMjMxNjkwMSIsImF1dGhvcml0aWVzIjpbInVzZXIucmVhZCIsInRlc3QiLCJ1c2VyX2luZm8iLCJvcGVuaWQiLCJwcm9maWxlIiwiU0NPUEVfdGVzdCIsIlNDT1BFX3Rlc3QucmVhZCJdLCJhdWQiOiJ0ZXN0LWNsaWVudCIsIm5iZiI6MTcxMDEyOTA5NSwicm9sZUluZm8iOlt7InJvbGVJZCI6Mzc1OTk0NzEzMiwicm9sZU5hbWUiOiLkuLvnrqHnkIblkZgiLCJhdXRob3JpdGllcyI6WyJTQ09QRV90ZXN0IiwiU0NPUEVfdGVzdC5yZWFkIl19LHsicm9sZUlkIjozNzU5OTQ3MTM1LCJyb2xlTmFtZSI6IuS4u-euoSIsImF1dGhvcml0aWVzIjpbXX0seyJyb2xlSWQiOjM3NTk5NDcxMzcsInJvbGVOYW1lIjoi5Zut6ZW_IiwiYXV0aG9yaXRpZXMiOltdfSx7InJvbGVJZCI6Mzc3MjEyODMzNSwicm9sZU5hbWUiOiJ0ZXN0IiwiYXV0aG9yaXRpZXMiOltdfV0sInNjb3BlIjpbInVzZXIucmVhZCIsInRlc3QiLCJ1c2VyX2luZm8iLCJvcGVuaWQiLCJwcm9maWxlIl0sImV4cCI6MTcxMDIxNTQ5NSwiZGVwdEluZm8iOltdLCJpYXQiOjE3MTAxMjkwOTV9.LCMTCclfbhVJVzU1EjdrY7gpR7W7VKzt3-9nwTcZjv2A1bCigmUQjRI6S8dMMF_mIfptiUer5nCk1CBAYm-xQ-Rj86bOf1fqseg6UDTM1_ehiSYR5OSYHcbTMSxvA9RtaA05kT9kReCpUyMeAgdV4-Uj453cTEiGlTrK2TXNthosgIcwgRZooNcMEGGsV-YMkYv69Nmv9e9F8d2lQ26w8MZ-Rke5BUL2fvsvy-XBW8ygvkcarUWfdwml9XDXSLRK1sRCSad1ghvR84EkS8qK_Ii5LoKaxuZ7j4OSJifGeWNuTYveaTTtUy9ZG7cCbD7-kSdOxpgeNS0MjZDc22Xdhg'
|
||||
console.log(jsonwebtoken.decode(token))
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 设置初始化，防止刷新时恢复默认
|
||||
|
||||
@@ -15,3 +15,56 @@ export function formatDate (timeStr = (new Date()), separator = '-', type){
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
重置表单对象
|
||||
@param { Object } form(必填) 需要重置的表单
|
||||
@param { Object } rules(选填) 指定需要重置的值默认设为null 试例rules:{ name: 1 } name字段重置为1
|
||||
@return { Object } 重置后的值
|
||||
*/
|
||||
export function resetForm(form, rules = {}) {
|
||||
for (let key in form) {
|
||||
if (checkType(form[key]) == "Array") {
|
||||
if (rules.hasOwnProperty(key)) {
|
||||
// 是否包含需要更改的
|
||||
form[key] = rules[key];
|
||||
} else {
|
||||
form[key] = [];
|
||||
}
|
||||
} else if (checkType(form[key]) == "Object") {
|
||||
if (rules.hasOwnProperty(key)) {
|
||||
// 是否包含需要更改的
|
||||
form[key] = rules[key];
|
||||
} else {
|
||||
form[key] = {};
|
||||
}
|
||||
} else if (checkType(form[key]) == "Boolean") {
|
||||
if (rules.hasOwnProperty(key)) {
|
||||
// 是否包含需要更改的
|
||||
form[key] = rules[key];
|
||||
} else {
|
||||
form[key] = false;
|
||||
}
|
||||
} else {
|
||||
if (rules.hasOwnProperty(key)) {
|
||||
// 是否包含需要更改的
|
||||
form[key] = rules[key];
|
||||
} else {
|
||||
form[key] = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
return form;
|
||||
}
|
||||
|
||||
/* 手机号验证
|
||||
@param { Number } IdcardVal(必填) 手机号
|
||||
@return { Boolean } true 通过 false 失败
|
||||
*/
|
||||
export function rulesPhone(phoneVal) {
|
||||
let phoneReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/;
|
||||
if (!phoneReg.test(phoneVal)) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// 定义内容
|
||||
export default {
|
||||
login: {
|
||||
placeholder1: 'The user name admin or not is test',
|
||||
placeholder2: 'Password: 123456',
|
||||
placeholder1: 'Please enter your phone number',
|
||||
placeholder2: 'Please enter the verification code',
|
||||
placeholder3: 'Please enter the verification code',
|
||||
btnText: 'Sign in',
|
||||
link: {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// 定义内容
|
||||
export default {
|
||||
login: {
|
||||
placeholder1: '用户名 admin 或不输均为 test',
|
||||
placeholder2: '密码：123456',
|
||||
placeholder1: '请输入手机号',
|
||||
placeholder2: '请输入验证码',
|
||||
placeholder3: '请输入验证码',
|
||||
btnText: '登 录',
|
||||
link: {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// 定义内容
|
||||
export default {
|
||||
login: {
|
||||
placeholder1: '用戶名admin或不輸均為test',
|
||||
placeholder2: '密碼：123456',
|
||||
placeholder1: '請輸入驗證碼',
|
||||
placeholder2: '請輸入驗證碼',
|
||||
placeholder3: '請輸入驗證碼',
|
||||
btnText: '登 录',
|
||||
link: {
|
||||
|
||||
@@ -0,0 +1,291 @@
|
||||
import Vue from 'vue';
|
||||
import store from '../store';
|
||||
import VueRouter from 'vue-router';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
import { Session } from '@/utils/storage';
|
||||
import { PrevLoading } from '@/utils/loading.js';
|
||||
import { useMenuApi } from '@/api/menu';
|
||||
import adminbendirout from '../../public/admin';
|
||||
|
||||
const menuApi = useMenuApi();
|
||||
|
||||
// 解决 `element ui` 导航栏重复点菜单报错问题
|
||||
const originalPush = VueRouter.prototype.push;
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch((err) => err);
|
||||
};
|
||||
|
||||
// 安装 VueRouter 插件
|
||||
Vue.use(VueRouter);
|
||||
|
||||
// 定义动态路由
|
||||
const dynamicRoutes = [
|
||||
{
|
||||
path: '/',
|
||||
name: '/',
|
||||
component: 'layout/index',
|
||||
redirect: '/home',
|
||||
meta: {
|
||||
isKeepAlive: true,
|
||||
},
|
||||
children: [],
|
||||
},
|
||||
];
|
||||
|
||||
// 定义静态路由
|
||||
const staticRoutes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/views/login'),
|
||||
meta: {
|
||||
title: '登录',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: 'notFound',
|
||||
component: () => import('@/views/error/404.vue'),
|
||||
meta: {
|
||||
title: 'message.staticRoutes.notFound',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/401',
|
||||
name: 'noPower',
|
||||
component: () => import('@/views/error/401.vue'),
|
||||
meta: {
|
||||
title: 'message.staticRoutes.noPower',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 加载静态路由
|
||||
const createRouter = () =>
|
||||
new VueRouter({
|
||||
routes: staticRoutes,
|
||||
});
|
||||
|
||||
// 创建路由
|
||||
const router = createRouter();
|
||||
|
||||
// 加载 loading
|
||||
PrevLoading.start();
|
||||
|
||||
// 多级嵌套数组处理成一维数组
|
||||
export function formatFlatteningRoutes(arr) {
|
||||
if (arr.length <= 0) return false;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i].children) {
|
||||
arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
// 处理 tagsViewList 数据，默认路由全部缓存
|
||||
// isKeepAlive 处理 `name` 值，进行路由缓存
|
||||
export function formatTwoStageRoutes(arr) {
|
||||
if (arr.length <= 0) return false;
|
||||
const newArr = [];
|
||||
const cacheList = [];
|
||||
arr.forEach((v) => {
|
||||
newArr.push({ ...v });
|
||||
cacheList.push(v.name);
|
||||
store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
|
||||
});
|
||||
return newArr;
|
||||
}
|
||||
|
||||
// 判断路由 meta.roles 中是否包含当前登录用户权限字段
|
||||
export function hasAuth(roles, route) {
|
||||
if (route.meta && route.meta.roles) return roles.some((role) => route.meta.roles.includes(role));
|
||||
else return true;
|
||||
}
|
||||
|
||||
// 递归过滤有权限的路由
|
||||
export function setFilterMenuFun(routes, role) {
|
||||
const menu = [];
|
||||
routes.forEach((route) => {
|
||||
const item = { ...route };
|
||||
if (hasAuth(role, item)) {
|
||||
if (item.children) item.children = setFilterMenuFun(item.children, role);
|
||||
menu.push(item);
|
||||
}
|
||||
});
|
||||
return menu;
|
||||
}
|
||||
|
||||
// 缓存多级嵌套数组处理后的一维数组(tagsView、菜单搜索中使用：未过滤隐藏的(isHide))
|
||||
export function setCacheTagsViewRoutes(arr) {
|
||||
// 先处理有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示
|
||||
let rolesRoutes = setFilterMenuFun(arr, store.state.userInfos.userInfos.roles);
|
||||
// 添加到 vuex setTagsViewRoutes 中
|
||||
store.dispatch('tagsViewRoutes/setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(rolesRoutes)));
|
||||
}
|
||||
|
||||
// 递归处理多余的 layout : <router-view>，让需要访问的组件保持在第一层 layout 层。
|
||||
// 因为 `keep-alive` 只能缓存二级路由
|
||||
// 默认初始化时就执行
|
||||
export function keepAliveSplice(to) {
|
||||
if (to.matched && to.matched.length > 2) {
|
||||
to.matched.map((v, k) => {
|
||||
if (v.components.default instanceof Function) {
|
||||
v.components.default().then((components) => {
|
||||
if (components.default.name === 'parent') {
|
||||
to.matched.splice(k, 1);
|
||||
router.push({ path: to.path, query: to.query });
|
||||
keepAliveSplice(to);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (v.components.default.name === 'parent') {
|
||||
to.matched.splice(k, 1);
|
||||
keepAliveSplice(to);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理后端返回的 `component` 路径，拼装实现懒加载
|
||||
export function loadView(path) {
|
||||
/**
|
||||
* 打包成一个 js、一个 css
|
||||
*/
|
||||
// if (path.indexOf('layout') > -1) return () => Promise.resolve(require(`@/${path}`));
|
||||
// else return () => Promise.resolve(require(`@/views/${path}`));
|
||||
|
||||
/**
|
||||
* 打包成多个 js、多个 css
|
||||
*/
|
||||
if (path.indexOf('layout') > -1) return () => import(`@/${path}`);
|
||||
else return () => import(`@/views/${path}`);
|
||||
}
|
||||
|
||||
// 递归处理每一项 `component` 中的路径
|
||||
export function dynamicRouter(routes) {
|
||||
return routes.map((view) => {
|
||||
if (view.component) view.component = loadView(view.component);
|
||||
if (view.children) dynamicRouter(view.children);
|
||||
return view;
|
||||
});
|
||||
}
|
||||
|
||||
// 添加路由，模拟数据与方法，可自行进行修改 admin
|
||||
// 添加动态路由，`{ path: '*', redirect: '/404' }` 防止页面刷新，静态路由丢失问题
|
||||
// next({ ...to, replace: true }) 动态路由 addRoute 完毕后才放行，防止刷新时 NProgress 进度条加载2次
|
||||
// 文档地址：https://router.vuejs.org/zh/api/#router-addroutes
|
||||
export function adminUser(router, to, next) {
|
||||
resetRouter();
|
||||
// 发请求获取路由表操作
|
||||
// menuApi
|
||||
// .getMenuAdmin()
|
||||
// .then(async (res) => {
|
||||
// // 获取路由表
|
||||
// console.log(res.data);
|
||||
// // 读取用户信息，获取对应权限进行判断
|
||||
// store.dispatch('userInfos/setUserInfos');
|
||||
// store.dispatch('routesList/setRoutesList', setFilterMenuFun(res.data, store.state.userInfos.userInfos.roles));
|
||||
// dynamicRoutes[0].children = res.data;
|
||||
// const awaitRoute = await dynamicRouter(dynamicRoutes);
|
||||
// [...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
|
||||
// router.addRoute({ ...route });
|
||||
// });
|
||||
// setCacheTagsViewRoutes(JSON.parse(JSON.stringify(res.data)));
|
||||
// next({ ...to, replace: true });
|
||||
// })
|
||||
// .catch(() => {});
|
||||
|
||||
// 本地数据路由表操作
|
||||
console.log(adminbendirout);
|
||||
store.dispatch('userInfos/setUserInfos');
|
||||
store.dispatch('routesList/setRoutesList', setFilterMenuFun(adminbendirout.data, store.state.userInfos.userInfos.roles));
|
||||
dynamicRoutes[0].children = adminbendirout.data;
|
||||
const awaitRoute = dynamicRouter(dynamicRoutes);
|
||||
[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
|
||||
router.addRoute({ ...route });
|
||||
});
|
||||
setCacheTagsViewRoutes(JSON.parse(JSON.stringify(adminbendirout.data)));
|
||||
next({ ...to, replace: true });
|
||||
}
|
||||
|
||||
// 添加路由，模拟数据与方法，可自行进行修改 test
|
||||
// 添加动态路由，`{ path: '*', redirect: '/404' }` 防止页面刷新，静态路由丢失问题
|
||||
export function testUser(router, to, next) {
|
||||
resetRouter();
|
||||
menuApi
|
||||
.getMenuTest()
|
||||
.then(async (res) => {
|
||||
// 读取用户信息，获取对应权限进行判断
|
||||
store.dispatch('userInfos/setUserInfos');
|
||||
store.dispatch('routesList/setRoutesList', setFilterMenuFun(res.data, store.state.userInfos.userInfos.roles));
|
||||
dynamicRoutes[0].children = res.data;
|
||||
const awaitRoute = await dynamicRouter(dynamicRoutes);
|
||||
[...awaitRoute, { path: '*', redirect: '/404' }].forEach((route) => {
|
||||
router.addRoute({ ...route });
|
||||
});
|
||||
setCacheTagsViewRoutes(JSON.parse(JSON.stringify(res.data)));
|
||||
next({ ...to, replace: true });
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// 重置路由
|
||||
export function resetRouter() {
|
||||
router.matcher = createRouter().matcher;
|
||||
}
|
||||
|
||||
// 延迟关闭进度条
|
||||
export function delayNProgressDone(time = 300) {
|
||||
setTimeout(() => {
|
||||
NProgress.done();
|
||||
}, time);
|
||||
}
|
||||
|
||||
// 动态加载后端返回路由路由(模拟数据)
|
||||
export function getRouterList(router, to, next) {
|
||||
if (!Session.get('userInfo')) return false;
|
||||
if (Session.get('userInfo').userName === 'admin') adminUser(router, to, next);
|
||||
else if (Session.get('userInfo').userName === 'test') testUser(router, to, next);
|
||||
}
|
||||
|
||||
// 路由加载前
|
||||
router.beforeEach((to, from, next) => {
|
||||
keepAliveSplice(to);
|
||||
NProgress.configure({ showSpinner: false });
|
||||
if (to.meta.title && to.path !== '/login') NProgress.start();
|
||||
let token = Session.get('token');
|
||||
if (to.path === '/login' && !token) {
|
||||
NProgress.start();
|
||||
next();
|
||||
delayNProgressDone();
|
||||
} else {
|
||||
if (!token) {
|
||||
NProgress.start();
|
||||
next('/login');
|
||||
Session.clear();
|
||||
delayNProgressDone();
|
||||
} else if (token && to.path === '/login') {
|
||||
next('/home');
|
||||
delayNProgressDone();
|
||||
} else {
|
||||
if (Object.keys(store.state.routesList.routesList).length <= 0) {
|
||||
getRouterList(router, to, next);
|
||||
} else {
|
||||
next();
|
||||
delayNProgressDone(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 路由加载后
|
||||
router.afterEach(() => {
|
||||
PrevLoading.done();
|
||||
delayNProgressDone();
|
||||
});
|
||||
|
||||
// 导出路由
|
||||
export default router;
|
||||
+12
-4
@@ -246,9 +246,11 @@ export function delayNProgressDone(time = 300) {
|
||||
|
||||
// 动态加载后端返回路由路由(模拟数据)
|
||||
export function getRouterList(router, to, next) {
|
||||
if (!Session.get('userInfo')) return false;
|
||||
if (Session.get('userInfo').userName === 'admin') adminUser(router, to, next);
|
||||
else if (Session.get('userInfo').userName === 'test') testUser(router, to, next);
|
||||
if (!localStorage.getItem('token')) return false;
|
||||
if (localStorage.getItem('token') ) {
|
||||
console.log('777777777777')
|
||||
adminUser(router, to, next)
|
||||
}else if (localStorage.getItem('userInfo').userName === 'test') testUser(router, to, next);
|
||||
}
|
||||
|
||||
// 路由加载前
|
||||
@@ -256,24 +258,30 @@ router.beforeEach((to, from, next) => {
|
||||
keepAliveSplice(to);
|
||||
NProgress.configure({ showSpinner: false });
|
||||
if (to.meta.title && to.path !== '/login') NProgress.start();
|
||||
let token = Session.get('token');
|
||||
let token = localStorage.getItem('token');
|
||||
if (to.path === '/login' && !token) {
|
||||
console.log(111111111)
|
||||
NProgress.start();
|
||||
next();
|
||||
delayNProgressDone();
|
||||
} else {
|
||||
if (!token) {
|
||||
console.log(2222222222)
|
||||
NProgress.start();
|
||||
next('/login');
|
||||
Session.clear();
|
||||
delayNProgressDone();
|
||||
} else if (token && to.path === '/login') {
|
||||
console.log(33333333333)
|
||||
next('/home');
|
||||
delayNProgressDone();
|
||||
} else {
|
||||
console.log(4444444444)
|
||||
if (Object.keys(store.state.routesList.routesList).length <= 0) {
|
||||
console.log(55555)
|
||||
getRouterList(router, to, next);
|
||||
} else {
|
||||
console.log(6666666666)
|
||||
next();
|
||||
delayNProgressDone(0);
|
||||
}
|
||||
|
||||
+43
-1
@@ -1,6 +1,10 @@
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import { Session } from '@/utils/storage';
|
||||
import { login } from '../views/login/api.js'
|
||||
// import { login } from '@/login/api.js'
|
||||
import jsonwebtoken from 'jsonwebtoken'
|
||||
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
@@ -19,7 +23,45 @@ const state = {
|
||||
Authorization: `${Session.get('token')}`
|
||||
},
|
||||
campusCalendarTempentUrl: process.env.VUE_APP_BASE_API, //
|
||||
token: localStorage.getItem('token') || '',
|
||||
refreshToken: localStorage.getItem('refreshToken') || '', // 刷新token
|
||||
user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}, // 用户信息
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default new Vuex.Store({ state, modules });
|
||||
const mutations = {
|
||||
changeToken( state, newToken ) {
|
||||
state.token = newToken
|
||||
localStorage.setItem('token', newToken)
|
||||
},
|
||||
changeRefreshToken( state, newRefreshToken ) {
|
||||
state.refreshToken = newRefreshToken
|
||||
localStorage.setItem('refreshToken', newRefreshToken)
|
||||
},
|
||||
changeUser( state, newUser ) {
|
||||
state.user = newUser
|
||||
localStorage.setItem('user', JSON.stringify(newUser) )
|
||||
},
|
||||
|
||||
}
|
||||
const actions = {
|
||||
loginIn(store, obj) {
|
||||
return new Promise((resolve, reject) =>{
|
||||
login(obj).then(res =>{
|
||||
console.log('=========================')
|
||||
console.log(res)
|
||||
store.commit('changeToken',res.token_type + ' ' + res.access_token )
|
||||
store.commit('changeRefreshToken', res.refresh_token )
|
||||
console.log(jsonwebtoken.decode(res.access_token))
|
||||
store.commit('changeUser', jsonwebtoken.decode(res.access_token) )
|
||||
resolve(res)
|
||||
}).catch(err =>{
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default new Vuex.Store({ state, modules, mutations, actions });
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
const loginConfig = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
loginConfig: { // 登录配置信息
|
||||
client_id: 'test-client',
|
||||
client_secret: '123456',
|
||||
grant_type: 'dswj_multiple',
|
||||
login_type: 'sms_login',
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default loginConfig;
|
||||
@@ -3,6 +3,7 @@ import router, { resetRouter } from '@/router/index';
|
||||
import axios from 'axios';
|
||||
import { Message, MessageBox } from 'element-ui';
|
||||
import { Session } from '@/utils/storage';
|
||||
const getToken = localStorage.getItem('token');
|
||||
const errorCode = {
|
||||
'401': '登录状态已过期,即将返回首页重新登录。',
|
||||
'403': '当前操作没有权限',
|
||||
@@ -19,9 +20,10 @@ const service = axios.create({
|
||||
// 添加请求拦截器
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
// 在发送请求之前做些什么 token
|
||||
if (Session.get('token')) {
|
||||
config.headers.common['Authorization'] = `${Session.get('token')}`;
|
||||
// 是否需要设置 token
|
||||
const isToken = (config.headers || {}).isToken === false
|
||||
if (getToken && !isToken) {
|
||||
config.headers['Authorization'] = localStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
}
|
||||
return config;
|
||||
},
|
||||
@@ -34,6 +36,7 @@ service.interceptors.request.use(
|
||||
// 添加响应拦截器
|
||||
service.interceptors.response.use(
|
||||
(res) => {
|
||||
console.log(res)
|
||||
// 对响应数据做点什么
|
||||
const response = res.data;
|
||||
const code = res.data.code || 200;
|
||||
@@ -65,13 +68,14 @@ service.interceptors.response.use(
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
console.log(error.response.error) // 获取错误状态码
|
||||
// 对响应错误做点什么
|
||||
if (error.message.indexOf('timeout') != -1) {
|
||||
Message.error('网络超时');
|
||||
} else if (error.message == 'Network Error') {
|
||||
Message.error('网络连接错误');
|
||||
} else {
|
||||
Message.error(error.response.data.message);
|
||||
Message.error(error.response.data.msg || error.response.data.error);
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
// 登录
|
||||
export function login (data) {
|
||||
return request({
|
||||
url: '/oauth2/token',
|
||||
method: 'post',
|
||||
headers: {
|
||||
isToken: false,
|
||||
},
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取验证码
|
||||
export function getSmsCaptcha (phone) {
|
||||
return request({
|
||||
url: '/getSmsCaptcha',
|
||||
method: 'get',
|
||||
headers: {
|
||||
isToken: false,
|
||||
},
|
||||
params: {
|
||||
phone
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
+128
-28
@@ -23,46 +23,49 @@
|
||||
<div class="login-main">
|
||||
<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
|
||||
<h4 class="login-title">数字校园教育管理平台</h4>
|
||||
<h5>请使用钉钉小程序扫码登录</h5>
|
||||
<!-- <h5>请使用钉钉小程序扫码登录</h5> -->
|
||||
<el-form class="el-form login-form">
|
||||
<el-form-item style="margin-left: 0px" prop="userName">
|
||||
<el-form-item style="margin-left: 0px" prop="phone">
|
||||
<el-input
|
||||
type="text"
|
||||
:placeholder="$t('message.login.placeholder1')"
|
||||
prefix-icon="el-icon-user"
|
||||
v-model="ruleForm.userName"
|
||||
v-model="loginForm.phone"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-left: 0px" prop="password">
|
||||
<!-- <el-form-item style="margin-left: 0px" prop="code">
|
||||
<el-input
|
||||
type="password"
|
||||
type="code"
|
||||
:placeholder="$t('message.login.placeholder2')"
|
||||
prefix-icon="el-icon-lock"
|
||||
v-model="ruleForm.password"
|
||||
v-model="loginForm.code"
|
||||
autocomplete="off"
|
||||
:show-password="true"
|
||||
:show-code="true"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item style="margin-left: 0px" prop="code">
|
||||
<div class="el-row" span="24">
|
||||
<div class="el-col el-col-16">
|
||||
<div class="el-col el-col-14">
|
||||
<el-input
|
||||
type="text"
|
||||
maxlength="4"
|
||||
:placeholder="$t('message.login.placeholder3')"
|
||||
prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code"
|
||||
:placeholder="$t('message.login.placeholder2')"
|
||||
prefix-icon="el-icon-lock"
|
||||
v-model="loginForm.code"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="el-col el-col-8">
|
||||
<div class="login-code">
|
||||
<span class="login-code-img">1234</span>
|
||||
<div class="el-col el-col-10">
|
||||
<div @click="onClickSendCode" class="login-code">
|
||||
<!-- <span class="login-code-img" > -->
|
||||
<!-- <i class="el-icon-position">{{ sendText }}</i> -->
|
||||
<!-- </span> -->
|
||||
<el-button class="el-icon-position" style="width: 100%;">{{ sendText }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,7 +110,8 @@ import { PrevLoading } from "@/utils/loading.js";
|
||||
import { quotationsList } from "./mock";
|
||||
import { useLoginApi } from "@/api/login";
|
||||
import { Message } from "element-ui";
|
||||
|
||||
import { rulesPhone } from '@/com/index.js'
|
||||
import { getSmsCaptcha, login } from './api'
|
||||
const LoginApi = useLoginApi();
|
||||
|
||||
export default {
|
||||
@@ -120,15 +124,15 @@ export default {
|
||||
submit: {
|
||||
loading: false,
|
||||
},
|
||||
ruleForm: {
|
||||
userName: "admin",
|
||||
password: "123456",
|
||||
code: "1234",
|
||||
loginForm: {
|
||||
phone: "18015724687",
|
||||
code: "",
|
||||
},
|
||||
time: {
|
||||
txt: "",
|
||||
fun: null,
|
||||
},
|
||||
sendText: '发送'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -146,6 +150,10 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.initRandomQuotations();
|
||||
// console.log(localStorage.getItem('user'))
|
||||
console.log('this.$store.state.loginConfig')
|
||||
console.log(this.$store.state.loginConfig.loginConfig)
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 随机语录
|
||||
@@ -164,7 +172,101 @@ export default {
|
||||
// 登录按钮点击
|
||||
submitForm() {
|
||||
this.submit.loading = true;
|
||||
this.$router.push('/evaluate')
|
||||
console.log(this.$router)
|
||||
localStorage.setItem('token', 123)
|
||||
|
||||
if( rulesPhone(this.loginForm.phone) ){ // 判断是否存在手机号验证码
|
||||
if(this.loginForm.code){
|
||||
// 登录发请求获取用户信息
|
||||
let obj = {...this.$store.state.loginConfig.loginConfig, ...this.loginForm}
|
||||
let formData = new FormData()
|
||||
for( let key in obj){
|
||||
formData.append(key, obj[key])
|
||||
}
|
||||
this.$store.dispatch('loginIn', formData).then(res =>{
|
||||
this.$message.success('登录成功！')
|
||||
// this.$router.push('/evaluate')
|
||||
this.oldSet()
|
||||
|
||||
}).finally(err =>{
|
||||
this.submit.loading = false;
|
||||
this.sendText = '发送'
|
||||
})
|
||||
}
|
||||
}else {
|
||||
this.$message.error('请输入正确的手机号！')
|
||||
}
|
||||
|
||||
},
|
||||
// 点击发送验证码
|
||||
onClickSendCode() {
|
||||
if( rulesPhone(this.loginForm.phone)){
|
||||
if(this.sendText == '发送' || this.sendText == '重新发送'){
|
||||
getSmsCaptcha(this.loginForm.phone).then(res =>{
|
||||
this.sendText = '发送成功'
|
||||
}).catch(err =>{
|
||||
this.sendText = '重新发送'
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.$message.error('请输入正确的手机号！')
|
||||
}
|
||||
},
|
||||
// 验证表单
|
||||
rulesForm() {
|
||||
// if(loginForm.phone){
|
||||
|
||||
// }
|
||||
// this.loginForm.phone
|
||||
},
|
||||
oldSet() {
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
// admin 页面权限标识，对应路由 meta.roles
|
||||
let adminRoles = ["admin"];
|
||||
// admin 按钮权限标识
|
||||
let adminAuthBtnList = ["btn.add", "btn.del", "btn.edit", "btn.link"];
|
||||
// common 页面权限标识，对应路由 meta.roles
|
||||
let testAuthPageList = ["common"];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList = ["btn.add", "btn.link"];
|
||||
if (this.loginForm.phone === "admin") {
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
defaultRoles = testAuthPageList;
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
phone: this.loginForm.phone === "admin" ? "admin" : "test",
|
||||
photo:
|
||||
this.loginForm.phone === "admin"
|
||||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||||
: "https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
||||
time: new Date().getTime(),
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
};
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set("userInfo", userInfos);
|
||||
// 存储用户信息到vuex
|
||||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||||
PrevLoading.start();
|
||||
this.$router.push("/");
|
||||
setTimeout(() => {
|
||||
this.$message.success(
|
||||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||||
);
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.time.fun);
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
setTimeout(() => {
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
@@ -176,7 +278,7 @@ export default {
|
||||
let testAuthPageList = ["common"];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList = ["btn.add", "btn.link"];
|
||||
if (this.ruleForm.userName === "admin") {
|
||||
if (this.loginForm.phone === "admin") {
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
@@ -184,9 +286,9 @@ export default {
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
userName: this.ruleForm.userName === "admin" ? "admin" : "test",
|
||||
phone: this.loginForm.phone === "admin" ? "admin" : "test",
|
||||
photo:
|
||||
this.ruleForm.userName === "admin"
|
||||
this.loginForm.phone === "admin"
|
||||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||||
: "https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
||||
time: new Date().getTime(),
|
||||
@@ -207,11 +309,8 @@ export default {
|
||||
);
|
||||
}, 300);
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.time.fun);
|
||||
},
|
||||
*/
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -344,6 +443,7 @@ export default {
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
&:hover {
|
||||
border-color: var(--prev-border-color-hover);
|
||||
transition: all ease 0.2s;
|
||||
|
||||
Reference in New Issue
Block a user