这篇文章本来不打算写的,但看到掘金某篇同样浅显的文章也收获了几百赞,顿时觉得这类文章还是被需要的,因此还是自己记录一下.大多都是直接贴代码吧,然后补充下里面的注释.
image.png
路由守卫
路由表的结构不再赘述,值得一提就是meta的应用和路由懒加载.meta经常被用于存放title 是否需要缓存(keep-alive)等信息,而后者涉及到webpack打包时的分块,在vue-router文档里提供了官方解决办法.
进行路由跳转时,最常用的是路由守卫.全局路由守卫可以用于登录状态判断等,而页面路由守卫常常用于判断缓存 单独提示 销毁定时器等等.
// 动态添加路由表
const addRouterMap = function (router, next, to) {
$form.get('menu_manage/menu_list_with_role').then(res => {
// 深拷贝路由表
let filteredRouterMap = clone['array'](asyncRouterMap)
// 生成权限表
let permissionMap = {}
for (let menu of res.data) {
permissionMap[+menu.menu_id] = menu.checked
}
store.commit('savePermissionMap', {permissionMap})
// 根据权限表进行路由筛选
filteredRouterMap[0] = multiTree(filteredRouterMap[0], permissionMap)
// 二级路由重定向
filteredRouterMap[0].children.forEach((route, index) => {
let children = route.children
if (children && children.length) {
let flag = false
for (let sub of children) {
sub.group && (flag = true)
}
if (flag) {
route.redirect = route.path + '/' + children[0].path
} else {
filteredRouterMap[0].children.splice(index, 1)
}
}
})
router.addRoutes(filteredRouterMap)
store.commit('router/saveRouterMap', {filteredRouterMap})
store.commit('switchPermissionMapFilterStatus', {status: true}) // 标记筛选完成
next({path: to.path, query: to.query})
})
}
// 路由权限验证
const whiteList = ['Login', 'NotFound'] // 不重定向白名单
export default (router) => {
return (to, from, next) => {
if (store.state.token.token) { // 判断是否有token
if (to.path.toLowerCase() === '/login') {
next({ path: '/' })
} else {
if (!store.state.isPermissionFilter) {
addRouterMap(router, next, to)
} else if (((to.path.indexOf(from.path) === 0) || (from.path.indexOf(to.path) === 0) || (from.name === 'clientList')) && from.path !== '/') {
store.commit('switchSearchFlag', { res: false })
next()
} else {
store.commit('switchSearchFlag', { res: true })
next()
}
}
} else {
if (whiteList.includes(to.name)) { // 在免登录白名单，直接进入
next()
} else {
Message({
message: '请登录后再进行操作',
type: 'error'
})
next('/login')
}
}
}
}
以上就是后台在登录后的权限判断和其他操作,github上高star的vue后台管理系统对于权限管理的实现也和这个类似.虽然由于这个系统不是我在维护,我并没有太看懂上面那一坨在干嘛......但是下面的白名单等一些东西是比较普适性的.
axios配置
import $form from 'axios'
import qs from 'qs'
import router from '@/router'
import store from '@/store'
import baseApi from '@/lib/api'
// 表单格式提交
$form.defaults.timeout = 12000 // 响应时间
$form.defaults.responseType = 'json'
$form.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 配置请求头
$form.defaults.baseURL = baseApi.BASE_API_URL // 配置接口地址
$form.defaults.transformRequest = [function (params) {
return qs.stringify(params)
}]
function interceptorsRequestSuccess (config) {
// store.commit('switchBtnLoading', {status: true})
config.headers.Authorization = store.state.token || localStorage.getItem('TOKEN')
config.headers.versions = 'multi-specification'
config.headers.OpenId = store.state.openid || localStorage.getItem('OPENID')
return config
}
function interceptorsRequestError (error) {
return Promise.reject(error)
}
function interceptorsResponseSuccess (response) {
// store.commit('switchBtnLoading', {status: false})
return Promise.resolve(response.data)
}
function interceptorsResponseError (error) {
let msg
// store.commit('switchBtnLoading', {status: false})
if (error.response && error.response.status === 401) {
localStorage.removeItem('OPENID')
store.commit('removeToken')
window.location.href = baseApi.WX_AUTH_URL
// router.push({ name: 'login' })
return
} else if (error.response && error.response.status === 402) {
return router.push({name: 'login'})
} else {
if (error.response && error.response.data && error.response.data.tips) {
msg = error.response.data.tips
} else {
msg = '请求失败'
}
// Message({
// message: msg,
// type: 'error'
// })
}
return Promise.reject(error.response && (error.response.data || msg))
}
$form.interceptors.request.use(interceptorsRequestSuccess, interceptorsRequestError)
$form.interceptors.response.use(interceptorsResponseSuccess, interceptorsResponseError)
// json格式提交
let $json = $form.create({
baseURL: baseApi.BASE_API_URL, // 配置接口地址
headers: {
post: {
'Content-Type': 'application/json;charset=UTF-8'
}
},
transformRequest: [function (params) {
return JSON.stringify(params)
}]
})
$json.interceptors.request.use(interceptorsRequestSuccess, interceptorsRequestError)
$json.interceptors.response.use(interceptorsResponseSuccess, interceptorsResponseError)
const axios = {}
axios.install = function (Vue, options = {}) {
Vue.prototype.$http = $form
Vue.prototype.$json = $json
Vue.prototype.$baseUrl = baseApi
}
export default axios
export {$form, $json}
以上算是很普遍的一个axios配置了,对于超时时间 接口 返回类型等进行了配置,用qs对其序列化.然后就是对请求 返回拦截后进行处理,比如
- 请求成功时,从store或者本地拿到token配置在请求头里,这里因为是微信公众号项目所以还拿了个openid.
- 返回报错后,如果401则移除token,跳转微信授权页,以及其他一些报错信息.
- 请求失败和返回成功都正常处理.
然后为了方便使用,直接将这两种请求格式绑在了vue实例的原型链上.我知道不应该往原型链上塞东西,但是这样真的方便.......
跳转历史页面
因为我们往往是因为没有权限才从其他页面跳到登录页的,所以我们在登录后肯定不是想看到"我的中心"这些鬼玩意,这就希望我们跳回之前的页面了.其他页面也往往会有类似的需求,比如从商品列表跳到商品详情,然后再跳转回去时希望能够记住高度啊缓存页面之类的.那么下面代码可以解决问题.
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
// 这是写在app.js里的,配合之前提到的meta信息来决定缓存.缓存又涉及到生命周期钩子比如activated等,我直接引用另外一篇文章,讲得更清晰.
// 将keepAlive的界面高度存储在仓库
function savePageScrollTop (name, height) {
store.commit('setFaceHeight', {key: name, value: height})
}
// 存在state 移到指定位置（异步操作）
function returnPage (ev) {
// location.hash则可以用来获取或设置页面的标签值
ev.state && setTimeout(() => {
window.scrollTo(0, store.state.faceHeight[location.hash.slice(1)])
}, 0)
}
// 当URL的片段标识符更改时,将触发 hashchange 事件 (跟在#符号后面的URL部分,包括#符号)
window.addEventListener('hashchange', function () {
// 调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件
this.history.replaceState('hasHash', '', '')
}, false)
// 当活动历史记录条目更改时,将触发popstate事件 (监听hashchange事件， 为当前导航页附加一个标签， 存在state 就发生scrollTo 移动。)
window.addEventListener('popstate', returnPage, false)
router.beforeEach((to, from, next) => {
// 如果满足keepAlive执行回调
if (from.meta.keepAlive) {
savePageScrollTop(from.path, window.scrollY)
}
document.title = to.meta.title || ''
next()
})
这是掘金上别人的文章vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
