这几天在公司里面用到了vue,进行开发,首先就遇到了问题 ,登录,以前感觉登录很简单啊, 我把相关的参数传给后台,然后后台返回给我相应的code,就可以了,但是这次好像,跟以前不一样,虽然说最终原理都是一样的,好了,废话不多说,直接开始代码了
我在项目里面用到了的是全局守卫,beforeEach,方便管理
1、我们首先要判断哪些路由是需要进行登录的,所以呢,我们可以通过一个字段,如下
{
path:"managesystemhome",
name:"managesystemhome",
component:resolve => require(['@/components/managesystemhome'],resolve),
meta:{
/*标明需要登录*/
auth:true
},
},
哈哈,应该知道了是写了注释的代码。
那个auth:true,是用在什么地方呢,看下面
//全局守卫,记录登录状态
router.beforeEach((to,from,next)=>{
//需求登录判断
if(to.meta.auth){
//未登录
var isLogin = sessionStorage.getItem('isLogin');
if(isLogin){
next();
}else{
next('login');
}
}else{
next();
}
})
此处有一个小插曲哦,我当时写这个代码的时候,遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题
错误的代码如下:
报的错如下:
提供一个链接,我也是在这个链接上看到的,解决链接
好了,解决了第一个坑
2、我觉得得知道一点,vuex存储的状态是存储在内存,而sessionStorage是存在本地,所以当我们刷新页面的时候,vuex存储的状态,就没了,我们在登录的时候,存储的token不能放在vuex存储的状态里面,得换成sessionStorage,
代码如下:因为在学vuex,所以就在这个里面写了
改变状态的地方:
this.$store.commit("changeLogin",1);
this.$store.commit("getToken",'ddfff22334');
都做完了,就开始用导航守卫
了,在导航守卫里面判断登录状态,如果是登录状态,就直接跳到相应的页面,如果不是登录状态,就直接跳到登录页面
//全局守卫,记录登录状态
router.beforeEach((to,from,next)=>{
console.log(this.$Store);
//需求登录判断
if(to.meta.auth){
//未登录
var isLogin = sessionStorage.getItem('isLogin');
if(isLogin){
next();//跳转到目标页面
}else{
next('login');//跳转到登录页面
}
}else{
next();
}
})
3、其实前端这边还可以继续写一步,本来我也打算直接止步第二步了, 后来在网上无意中看到了拦截器,
如果我们在访问相关页面,后台是需要我们带着token,,去请求的,所以接下来的这一步就很有意义啊,代码图解
附上代码吧,方便粘贴
//http request拦截器
axios.interceptors.request.use(
config =>{
debugger
var token = sessionStorage.getItem('token');
if(token){
// 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.Authorization = 'token ${store.state.token}';
}
return config;
},
err =>{
return Promise.reject(err);
}
)
// //http response拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
return Promise.reject(error.response.data) // 返回接口返回的错误信息
});
好像就这么多了,over