admin管理员组文章数量:1633799
分享一下今天做Vue项目中使用全局路由守卫(也叫做路由导航钩子函数)进行全局控制登录。
二话不说,上代码:
在main.js文件中写代码
//使用vue-router
import router from './router'
//使用vuex状态管理仓库
import store from '../store/store'
//使用vue-cookies 用来获取cookies
import VueCookies from 'vue-cookies'
// 全局路由守卫
router.beforeEach((to, from, next) => {
//判断是否存在LoginUser这个cookie
//有的话说明用户已经处于登录状态
if (VueCookies.get('LoginUser')) {
//vuex中Islogin默认为flase(未登录),此时需提交更改将其值改为true
//表示处于登录状态
store.commit('setIslogin', true)
}
if (to.path === '/login') { //判断要进入的路由是否为登录页面路由
next()
} else if (store.state.IsLogin) {
next()
} else {
next('/login')
}
})
ok,看到这里基本都了然了吧。
需要提一下的是在main.js中使用vuex和在组件中使用vuex有一点小小的不同之处
在组件中可以使用this.
s
t
o
r
e
.
s
t
a
t
e
;
t
h
i
s
.
store.state;this.
store.state;this.storemit()等对vuex中的数据进行操作。在main.js中可以直接这样写store.state;storemit()就可以对vuex中的数据进行操作了。
不要问我为什么,亲测有效,哦哈哈哈。
当然其他类似的也可以这样做,比如我这里面用到的vue-cookies,在组件中this.
c
o
o
k
i
e
s
.
r
e
m
o
v
e
(
)
;
t
h
i
s
.
cookies.remove();this.
cookies.remove();this.cookies.get()这样操作cookies
在main.js中用的话直接VueCookies.get();VueCookies.remove()就可以了。
ok,分享这些,与大家交流探讨。
版权声明:本文标题:Vue项目中main.js文件中的全局路由守卫 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729178123a1188975.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论