路由導(dǎo)航守衛(wèi)控制訪問(wèn)權(quán)限
如果用戶沒(méi)有登錄，但是直接通過(guò)Url訪問(wèn)特定頁(yè)面撞羽，需要重新導(dǎo)航到登錄頁(yè)面。
// 1. 需要拿到 router 對(duì)象谒出，掛載一個(gè)導(dǎo)航守衛(wèi)
// 2.把 export default new Router() 給拆分開(kāi)
const router = new Router({
routes: [
//訪問(wèn)'/' 直接渲染想要的頁(yè)面
{ path: '/', redirect: '/login' },
// 增加登錄路由規(guī)則
{ path: '/login', component: Login },
// 增加Home路由規(guī)則
{ path: '/home', component: Home }
]
})
// 3.然后把 router 暴露出去渡紫，但是在暴露這個(gè)路由對(duì)象之前要先掛載一個(gè)路由導(dǎo)航守衛(wèi)
// 掛載路由導(dǎo)航守衛(wèi)
router.beforeEach((to, from, next) => {
// to 講要訪問(wèn)的路徑
// from 代表從哪個(gè)路徑跳轉(zhuǎn)而來(lái)
// next 是一個(gè)函數(shù)考赛，標(biāo)識(shí)放行
// next有兩種放行方式 next() 直接放行 next('/login') 強(qiáng)制跳轉(zhuǎn)
//如果訪問(wèn)的是登錄頁(yè)就直接放行
if (to.path === '/login') return next();
// 獲取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login');
next();
})
// 暴露 router 對(duì)象
export default router
退出功能
退出功能的實(shí)現(xiàn)原理
基于 token 的方式實(shí)現(xiàn)退出比較簡(jiǎn)單，只要銷毀本地的token即可颜骤。這樣，后續(xù)的請(qǐng)求就不會(huì)攜帶token八孝，必須重新登錄生成一個(gè)新的token之后才可以訪問(wèn)頁(yè)面鸠项。
第一步：先清空token
window.sessionStorage.clear()
第二步：再跳轉(zhuǎn)到登錄頁(yè)
this.$router.push('/login')
<template>
<div>
<el-button type="info" @click="logout">退出</el-button>
</div>
</template>
<script>
export default {
methods: {
logout() {
// 1.清空token
window.sessionStorage.clear();
// 2.跳轉(zhuǎn)到登錄頁(yè)
this.$router.push('/login')
}
}
}
</script>
<style lang="less" scoped>
</style>
