一般前端做的話放到sessionStorage里面，通過vuex去管理，直接上代碼吧(我項目里'/'是登錄頁，'/Table'是登錄后的首頁)

// main.js router.beforeEach((to, from, next) => {if (to.path === '/' && sessionStorage.getItem('accessToken') && from.path !== '/Table'){sessionStorage.removeItem('accessToken')next()}else if (to.meta.requiresAuth && !sessionStorage.getItem('accessToken')){next({path: '/',query: {redirect: to.fullPath}})}else if (from.path === '/Table' && to.path === '/'){next({path: '/Table'})}else{next()} })

下面是登錄頁

login (){var _this = this;let params = {}params = {username: this.username,password: this.password}api.login_in(params).then(data => {if (data) {this.$store.commit(types.LOGIN_IN, data)this.$router.push(this.$route.query.redirect || '/Table');Toast({message: '登錄成功',iconClass: 'icon-success',})}}) }

然后是store.js

const state = {accessToken: null }const mutations = {[types.LOGIN_IN] (state, data) {state.accessToken = datasessionStorage.setItem('accessToken', JSON.stringify(data.name))},[types.LOGIN_OUT] (state, data) {state.accessToken = null} }

總結

以上是生活随笔為你收集整理的如何在vue-router的beforeEach钩子里做页面访问权限验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。