前端权限优化

main
qinzhenpen 2 years ago
parent f60644d42e
commit c207b2982a

@ -79,12 +79,11 @@ export default {
mounted() { mounted() {
const roleid = getroleId(); const roleid = getroleId();
// roleid4,3 // roleid4,3
if (roleid == 4) { // if (roleid == 4) {
this.routesList = dynamicRoutes; this.routesList = dynamicRoutes
} else if (roleid == 3) { // } else if (roleid == 3) {
this.routesList = teacher; // this.routesList = teacher;
} // }
console.log("dynamicRoutes", this.limitsRoutes);
}, },
watch: { watch: {
limitsRoutes() { limitsRoutes() {
@ -95,12 +94,11 @@ export default {
if (this.limitsRoutes.indexOf(fullPath) == -1) { if (this.limitsRoutes.indexOf(fullPath) == -1) {
item.children.splice(item.children.indexOf(itemChild), 1); item.children.splice(item.children.indexOf(itemChild), 1);
} }
console.log("fullPath", fullPath);
}); });
} }
}); });
console.log("this.routesList", this.routesList); // console.log("this.routesList", this.routesList);
console.log("dynamicRoutes", this.limitsRoutes); // console.log("dynamicRoutes", this.limitsRoutes);
}, },
}, },
}; };

@ -18,15 +18,15 @@ router.beforeEach((to, from, next) => {
// } // }
NProgress.start() NProgress.start()
if (getToken()) { if (getToken()) {
if (to.path === '/login') { // if (to.path === '/login') {
// console.log(getToken(),"getToken()") // // console.log(getToken(),"getToken()")
// next({ path: '/' }) // // next({ path: '/' })
if (getroleId() === 4) { // // if (getroleId() === 4) {
router.push({ path: '/teacher' }) // // router.push({ path: '/teacher' })
} else if (getroleId() === 3) { // // } else if (getroleId() === 3) {
router.push({ path: '/' }) // router.push({ path: '/student/index' })
} // // }
} // }
next() next()
// to.meta.title && store.dispatch('settings/setTitle', "外汇模拟交易") // to.meta.title && store.dispatch('settings/setTitle', "外汇模拟交易")
/* has token*/ /* has token*/

@ -1,10 +1,13 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import { getRouters } from '@/api/menu' import { getRouters } from '@/api/menu'
import { getToken } from '@/utils/auth'
import permission from '@/store/index.js'
Vue.use(Router) Vue.use(Router)
/* Layout */ /* Layout */
import Layout from '@/layout' import Layout from '@/layout'
/** /**
* Note: 路由配置项 * Note: 路由配置项
* *
@ -179,12 +182,12 @@ export const dynamicRoutes = [{
path: 'case', path: 'case',
component: () => import('@/views/teachingpan/index.vue'), component: () => import('@/views/teachingpan/index.vue'),
name: 'teachingPlan', name: 'teachingPlan',
meta: { title: '实训教案', icon: 'teachingplan', affix: true} meta: { title: '实训教案', icon: 'teachingplan', affix: true }
} }
] ]
}, },
{ {
path: '/quotation', path: '/student/quotation',
component: Layout, component: Layout,
hidden: false, hidden: false,
permissions: ['system:user:edit'], permissions: ['system:user:edit'],
@ -193,7 +196,7 @@ export const dynamicRoutes = [{
path: 'lowcore', path: 'lowcore',
component: () => import('@/views/quotation/index.vue'), component: () => import('@/views/quotation/index.vue'),
name: 'lowcore', name: 'lowcore',
meta: { title: '行情中心', icon: 'market', affix: true} meta: { title: '行情中心', icon: 'market', affix: true }
} }
] ]
}, },
@ -266,7 +269,22 @@ export const dynamicRoutes = [{
meta: { title: '修改生成配置', activeMenu: '/tool/gen' } meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
} }
] ]
}, { path: '*', redirect: '/404'} }
, { path: '*', redirect: '/404' },
{
path: '',
component: Layout,
redirect: 'ageIssue',
hidden: false,
children: [
{
path: 'teacher',
component: () => import('@/views/index_v1.vue'),
name: 'teacher',
meta: { title: '首页', icon: 'dashboard', affix: true }
}
]
},
] ]
// 教师端路由 // 教师端路由
export const teacher = [ export const teacher = [
@ -296,9 +314,36 @@ Router.prototype.push = function push(location) {
Router.prototype.replace = function push(location) { Router.prototype.replace = function push(location) {
return routerReplace.call(this, location).catch(err => err) return routerReplace.call(this, location).catch(err => err)
} }
const router = new Router({
export default new Router({
mode: 'history', // 去掉url中的# mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }), scrollBehavior: () => ({ y: 0 }),
routes: [...dynamicRoutes, ...constantRoutes, ...teacher] routes: [...dynamicRoutes, ...constantRoutes, ...teacher]
}) });
router.beforeEach((to, from, next) => {
// next();
console.log('to.fullPath',to.fullPath);
console.log('localStorage.getItem("limitsRoutes")', localStorage.getItem("limitsRoutes"));
const limitsRoutes = localStorage.getItem("limitsRoutes") ? localStorage.getItem("limitsRoutes").split(',') : []
if (!constantRoutes.filter(item => item.path == to.fullPath).length && to.fullPath !== '/404') {
if (limitsRoutes.indexOf(to.fullPath) == -1) {
console.log('没有权限')
next({ path: "/login" });
} else {
if (getToken())
{
next();
} else {
next({ path: "/login" });
}
next();
}
}
else {
next();
}
});
export default router

@ -8,7 +8,12 @@
</div> </div>
</div> </div>
<div class="login-mian"> <div class="login-mian">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">外汇模拟交易系统</h3> <h3 class="title">外汇模拟交易系统</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
@ -17,7 +22,11 @@
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
> >
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
@ -28,23 +37,29 @@
placeholder="密码" placeholder="密码"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
> >
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> <svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item style="width:100%;"> <el-form-item style="width: 100%">
<el-button <el-button
:loading="loading" :loading="loading"
size="medium" size="medium"
type="primary" type="primary"
style="width:100%;" style="width: 100%"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading"> </span> <span v-if="!loading"> </span>
<span v-else> ...</span> <span v-else> ...</span>
</el-button> </el-button>
<div v-if="register" style="float: right;"> <div v-if="register" style="float: right">
<router-link class="link-type" :to="'/register'">立即注册</router-link> <router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -58,49 +73,52 @@
<script> <script>
// import { getCodeImg } from "@/api/login"; // import { getCodeImg } from "@/api/login";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from "@/utils/jsencrypt";
import { getRouters } from "@/api/menu";
import { getroleId } from "@/utils/auth";
export default { export default {
name: 'Login', name: "Login",
data() { data() {
return { return {
codeUrl: '', codeUrl: "",
loginForm: { loginForm: {
username: '', username: "",
password: '', password: "",
rememberMe: false, rememberMe: false,
code: '', code: "",
uuid: '' uuid: "",
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: 'blur', message: '请输入您的账号' } { required: true, trigger: "blur", message: "请输入您的账号" },
], ],
password: [ password: [
{ required: true, trigger: 'blur', message: '请输入您的密码' } { required: true, trigger: "blur", message: "请输入您的密码" },
], ],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }] code: [{ required: true, trigger: "change", message: "请输入验证码" }],
}, },
loading: false, loading: false,
// //
captchaEnabled: true, captchaEnabled: true,
// //
register: false, register: false,
redirect: undefined redirect: undefined,
} };
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
this.redirect = route.query && route.query.redirect this.redirect = route.query && route.query.redirect;
},
immediate: true,
}, },
immediate: true
}
}, },
created() { created() {
Cookies.remove("Admin-Token");
localStorage.removeItem("limitsRoutes");
// this.getCode(); // this.getCode();
this.getCookie() this.getCookie();
}, },
methods: { methods: {
getCode() { getCode() {
@ -113,46 +131,78 @@ export default {
// }); // });
}, },
getCookie() { getCookie() {
const username = Cookies.get('username') const username = Cookies.get("username");
const password = Cookies.get('password') const password = Cookies.get("password");
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password) password:
} password === undefined ? this.loginForm.password : decrypt(password),
};
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true this.loading = true;
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
Cookies.set('username', this.loginForm.username, { expires: 30 }) Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 }) Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30,
});
} else { } else {
Cookies.remove('username') Cookies.remove("username");
Cookies.remove('password') Cookies.remove("password");
} }
const username = Cookies.get('username') const username = Cookies.get("username");
const password = Cookies.get('password') const password = Cookies.get("password");
const loginForm = { const loginForm = {
username: username === undefined ? this.loginForm.username : username, username:
passwordEncode: password === undefined ? encrypt(this.loginForm.password) : password username === undefined ? this.loginForm.username : username,
passwordEncode:
password === undefined
? encrypt(this.loginForm.password)
: password,
};
this.$store
.dispatch("Login", loginForm)
.then(() => {
console.log("loginForm", loginForm);
// this.getRouterList();
getRouters().then((res) => {
if (res.data?.length) {
localStorage.setItem("limitsRoutes", res.data);
if (getroleId() == 4) {
this.$router.push({
path: this.redirect || "/student/index",
});
} else {
this.$router.push({ path: this.redirect || "/teacher" });
}
} else {
localStorage.setItem("limitsRoutes",['/teacher']);
if (getroleId() == 4) {
this.$router.push({
path: this.redirect || "/student/index",
});
} else {
this.$router.push({ path: this.redirect || "/teacher" });
}
} }
this.$store.dispatch('Login', loginForm).then(() => { console.log("res111", localStorage.getItem("limitsRoutes"));
console.log('loginForm', loginForm) });
this.$router.push({ path: this.redirect || '/' }) })
}).catch(() => { .catch(() => {
console.log('dsdsdsd') console.log("dsdsdsd");
this.loading = false this.loading = false;
// if (this.captchaEnabled) { // if (this.captchaEnabled) {
// this.getCode(); // this.getCode();
// } // }
}) });
}
})
} }
} });
} },
},
};
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
@ -167,27 +217,27 @@ export default {
background-size: cover; background-size: cover;
// transform: translate(10%,10%); // transform: translate(10%,10%);
} }
.login-header{ .login-header {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
// height: 80px; // height: 80px;
background: #3c76df; background: #3c76df;
width: 100%; width: 100%;
.login-centen{ .login-centen {
width: 50%; width: 50%;
height: 80px; height: 80px;
margin: 0 auto; margin: 0 auto;
.logo{ .logo {
width: 180px; width: 180px;
height: 80px; height: 80px;
a{ a {
display: block; display: block;
width: 177px; width: 177px;
height: 48px; height: 48px;
background: url("../assets/logo/login-logo.png") no-repeat; background: url("../assets/logo/login-logo.png") no-repeat;
background-size: cover; background-size: cover;
transform: translate(1%, 30%);; transform: translate(1%, 30%);
} }
} }
} }
@ -197,13 +247,12 @@ export default {
text-align: center; text-align: center;
color: #707070; color: #707070;
} }
.login-mian{ .login-mian {
width: 50%; width: 50%;
// height: 100%; // height: 100%;
display: flex; display: flex;
justify-content: end; justify-content: end;
align-content: center; align-content: center;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;

@ -240,6 +240,7 @@ export default {
event.stopPropagation() event.stopPropagation()
} }
}, },
mounted() { mounted() {
const clipboard = new ClipboardJS('#copyNode', { const clipboard = new ClipboardJS('#copyNode', {
text: (trigger) => { text: (trigger) => {

Loading…
Cancel
Save