8000 debug login page · pycoder404/blog-vue@b362e1f · GitHub
[go: up one dir, main page]
Skip to content

Commit b362e1f

Browse files
pycoder404pycoder404
committed
debug login page
1 parent b9b237b commit b362e1f

File tree

7 files changed

+431
-9
lines changed

7 files changed

+431
-9
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"js-cookie": "^3.0.1",
1919
"mavon-editor": "^3.0.0-beta",
2020
"node-sass": "^7.0.1",
21+
"nprogress": "^0.2.0",
2122
"sass-loader": "^12.6.0",
2223
"vue": "^3.2.13",
2324
"vue-loader": "^17.0.0",

‎src/App.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
33
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
4-
<router-view></router-view>
4+
<div id 10000 ="app">
5+
<router-view></router-view>
6+
</div>
7+
58
</template>
69

710
<script>
@@ -19,6 +22,6 @@ export default {
1922
text-align: center;
2023
color: #2c3e50;
2124
margin: 5px 5px auto;
22-
height: 100vh;
25+
height: 100vh;
2326
}
2427
</style>

‎src/permission.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import router from './router'
2+
import store from './store'
3+
import { ElMessageBox } from 'element-plus'
4+
import NProgress from 'nprogress' // progress bar
5+
import 'nprogress/nprogress.css' // progress bar style
6+
import { getToken } from '@/utils/auth' // get token from cookie
7+
import getPageTitle from '@/utils/get-page-title'
8+
9+
NProgress.configure({ showSpinner: false }) // NProgress Configuration
10+
11+
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
12+
13+
router.beforeEach(async(to, from, next) => {
14+
// start progress bar
15+
console.log("router beforeEach")
16+
NProgress.start()
17+
18+
// set page title
19+
document.title = getPageTitle(to.meta.title)
20+
21+
// determine whether the user has logged in
22+
const hasToken = getToken()
23+
24+
if (hasToken) {
25+
if (to.path === '/login') {
26+
// if is logged in, redirect to the home page
27+
next({ path: '/' })
28+
NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
29+
} else {
30+
// determine whether the user has obtained his permission roles through getInfo
31+
const hasRoles = store.getters.roles && store.getters.roles.length > 0
32+
if (hasRoles) {
33+
next()
34+
} else {
35+
try {
36+
// get user info
37+
// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
38+
const { roles } = await store.dispatch('user/getInfo')
39+
40+
// generate accessible routes map based on roles
41+
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
42+
43+
// dynamically add accessible routes
44+
router.addRoutes(accessRoutes)
45+
46+
// hack method to ensure that addRoutes is complete
47+
// set the replace: true, so the navigation will not leave a history record
48+
next({ ...to, replace: true })
49+
} catch (error) {
50+
// remove token and go to login page to re-login
51+
await store.dispatch('user/resetToken')
52+
ElMessageBox.error(error || 'Has Error')
53+
next(`/login?redirect=${to.path}`)
54+
NProgress.done()
55+
}
56+
}
57+
}
58+
} else {
59+
/* has no token*/
60+
61+
if (whiteList.indexOf(to.path) !== -1) {
62+
// in the free login whitelist, go directly
63+
next()
64+
} else {
65+
// other pages that do not have permission to access are redirected to the login page.
66+
next(`/login?redirect=${to.path}`)
67+
NProgress.done()
68+
}
69+< 10000 div class="diff-text-inner"> }
70+
})
71+
72+
router.afterEach(() => {
73+
// finish progress bar
74+
NProgress.done()
75+
})

‎src/router/index.js

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,48 @@
1-
import {createRouter,createWebHistory} from 'vue-router'
1+
import {createRouter, createWebHistory} from 'vue-router'
22
// import ArticleIndex from "../views/article/index";
33
import ArticleList from "../views/article/list";
44
import ArticleCreate from "../views/article/create";
55
import ArticleDetail from "../views/article/detail";
66
import ArticleEdit from "../views/article/edit";
77
import LayOut from '../layout/index'
8+
import LoginPage from '../views/login/index'
9+
810
const routes = [
911
{
1012
path: '/',
1113
component: LayOut,
1214
redirect: '/article'
1315
},
14-
16+
{
17+
path: '/login',
18+
component: LoginPage,
19+
},
1520
{
1621
path: '/article',
1722
component: LayOut,
18-
redirect:'/article/list',
23+
redirect: '/article/list',
1924
children: [
2025
{
2126
path: 'list',
2227
component: ArticleList,
23-
name:'article list'
28+
name: 'article list'
2429
},
2530
{
2631
path: 'detail/:id(\\d+)/',
2732
component: ArticleDetail,
28-
name:'article detail'
33+
name: 'article detail'
2934

3035
},
3136
{
3237
path: 'edit/:id(\\d+)/',
3338
component: ArticleEdit,
34-
name:'article edit'
39+
name: 'article edit'
3540

3641
},
3742
{
3843
path: 'create',
3944
component: ArticleCreate,
40-
name:'article create'
45+
name: 'article create'
4146
}
4247
]
4348
}

‎src/settings.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
3+
title: 'a django-vue blog',
4+
5+
}

‎src/utils/get-page-title.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import defaultSettings from '@/settings'
2+
3+
const title = defaultSettings.title || 'pycoder404 Blog'
4+
5+
export default function getPageTitle(pageTitle) {
6+
if (pageTitle) {
7+
return `${pageTitle} - ${title}`
8+
}
9+
return `${title}`
10+
}

0 commit comments

Comments
 (0)
0