区分登录页面（不含有公共的侧边栏和顶部导航），和普通页面（含有公共的侧边栏和顶部导航）
- router 下的index.js
import Vue from 'vue'
import Router from 'vue-router'
import person from '@/components/person'
import workcheck from '@/components/workcheck'
import account from '@/components/account'
import login from '@/components/login'
import home from '@/components/home'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
component: home,
children: [
{
path: '/person',
name: 'person',
component: person
}, {
path: '/workcheck',
name: 'workcheck',
component: workcheck
}, {
path: '/account',
name: 'account',
component: account
}
]
}
]
})
- app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
- home.vue（公共的页面）
<template>
<div id="home">
<div class="app_top">
<img src="../assets/images/logo.png" alt="">
<div>
<img src="../assets/images/signout.png" alt="" class="img_signout">
<div class="sign_out">
<div class="triangle_border_up">
<span></span>
</div>
<p @click="signOut">退出</p>
</div>
</div>
</div>
<leftmenu></leftmenu>
<router-view></router-view>
</div>
</template>
<script>
import leftmenu from '../components/leftMenu'
export default {
name: "home",
components: {
leftmenu: leftmenu
},
methods: {
signOut () {
this.$router.push({ path: '/' });
}
}
}
</script>
<style scoped>
#home >div {
float: left;
}
#home .app_top {
width: 94.3%;
height:52px;
background: #303030;
color: #fff;
line-height:52px;
padding:0 3.7% 0 2%;
}
#home .app_top img:nth-of-type(1) {
margin-top:8px;
}
#home .app_top >div {
float:right;
margin-top:4px;
overflow: auto;
text-align: end;
}
#home .sign_out {
width: 100px;
height: 30px;
line-height: 30px;
background: #666666;
position: relative;
text-align: center;
font-size: 14px;
z-index: 1;
display: none;
}
#home .sign_out p {
cursor: pointer;
}
#home .triangle_border_up{
width:0;
height:0;
border-width:0 5px 5px;
border-style:solid;
border-color:transparent transparent #666666;/*透明 透明 灰*/
margin:0px auto;
position:absolute;
top: -5px;
right: 10px;
}
.img_signout {
cursor: pointer;
}
#home .app_top >div:hover .sign_out {
display: block !important;
}
</style>
文件目录
- src
- assets
- components
- leftmenu.vue // 左侧导航
- home.vue // 公共页面
- person.vue
- account.vue
- workcheck.vue
- router
- index.js // 路由
- app.vue
- main.js
登录页面实例
参考：https://blog.csdn.net/mirror_Mx/article/details/86165193
导航守卫（beforeEach与afterEach钩子函数）
在页面跳转之前和跳转之后，刷新页面后执行的方法，放在router.js中，判断是否需要重新登录
https://www.cnblogs.com/WQLong/p/8135553.html导航守卫判断用户登录
//www.greatytc.com/p/b179884c69a4
动态修改router中meta属性
this.$route.meta.title = '要修改的内容'
https://blog.csdn.net/qq_42407405/article/details/103287696
axios请求，登录成功后，请求头加token返回
- main.js 加拦截器
// 首先对拦截器的请求进行设置，并在方法中return config，此处为固定格式
axios.interceptors.request.use(config => {
// 表示在配置中的设置头消息的字段Authorization为从本地获取的token值
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
- 登录成功后，后台返回token值，前端存到本地
https://www.cnblogs.com/dhsz/p/6410031.html
登录成功后返回到原操作页面
- main.js（axios拦截）
axios.interceptors.response.use(
response => {
if (response.data.status == -999) {
Message.error('token无效，请重新登录')
router.replace({
name: 'login',
query: {
redirect: encodeURIComponent(router.currentRoute.fullPath) // 防止地址中带有&符号，导致跳转参数缺失
}
})
}
return response;
},
error => {
// console.log(error)
// return Promise.reject(error.response.message) // 返回接口返回的错误信息
});
- router.js（路由拦截）
router.beforeEach((to, from, next) => {
if (localStorage.getItem('token')) {
next()
} else {
next({
name: 'login',
query: {
redirect: encodeURIComponent(to.fullPath)
}
})
}
})
- login.vue（登录时，从地址栏中截取参数）
mounted () {
let that = this
// 获取地址栏中的redirect参数
let url = window.location.href
let obj = {};
let reg = /[?&][^?&]+=[^?&]+/g;
let arr = url.match(reg);
if (arr) {
arr.forEach(item => {
let tempArr = item.substring(1).split("=");
let key = decodeURIComponent(tempArr[0]);
let val = decodeURIComponent(tempArr[1]);
obj[key] = val;
});
}
let redirectUrl = obj.redirect
// 直接输入登录页地址，如果有token，直接进入页面
if (localStorage.getItem('token') && !redirectUrl ) {
that.$router.push({ path: '/index' })
return
}
// 登录方法
let obj = {} // 登录参数
this.$store.dispatch('auth/login', obj).then((res) => {
if (res.status == 0) {
if (redirectUrl != 'undefined' && redirectUrl != '/admin') {
that.$router.push({ path: redirectUrl }); // 上次的页面
} else {
that.$router.push({ path: '/index' }) // 默认进入的页面
}
}
})
}
https://blog.csdn.net/weixin_34161032/article/details/93170062
https://blog.csdn.net/qq_40323256/article/details/104196746
vue 路由权限验证 router.addRoutes
let route=[
{
path: '/pageA',
name: 'pageA',
component: pageA,
},
{
path: '/pageB',
name: 'pageB',
component: pageB,
},
{
path: '/pageC',
name: 'pageC',
component: pageC,
}
]
let commonUser=['pageA','pageB'] // 用户权限为这两个页面
let commonUserRoute=route.filter(function(page){
return commonUser.includes(page.name)
})
console.log(commonUserRoute);
router.addRoutes(commonUserRoute); // 将有权限的页面接入路由
//结果
// (2) [{…}, {…}]
// 0: {path: "/pageA", name: "pageA", component: pageA}
// 1: {path: "/pageB", name: "pageB", component: pageB}
// length: 2
// __proto__: Array(0)
//www.greatytc.com/p/27e304884459
