前后端分离后用户登录状态的保持和登录状态的安全保障

1.前后端分离后，前端登录状态保持一般采用webstorage或是cookie来保存token或用户信息的方式来维持登录状态。如果webstorage或是cookie中没有token，则前端认为是没有登录，拦截到登录页面。vue中利用路由的beforeEach实现，可在main.js中做如下逻辑：

 // 路由判断登录 根据路由配置文件的参数 router.beforeEach((to, from, next) => {   if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限      if (localStorage.token) { // 判断当前的token是否存在 ； 登录存入的token       next();     }     else {       console.log('需要登录');       next({         path: '/login',         query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由       })     }   }   else {     next();   } });

router中配置，通过meta指定路由是否需要登录校验标识

 export default new Router({   routes: [     {       path: '/login',       name: 'login',       component: Login     },     {       path: '/',       name: 'App',       meta:{         requireAuth: true,       },       component:App,       children:[         {           path: 'mycomp/xxx1',           component: MyComp         },         {           path: 'mycomp/xxx2',           component: MyComp         },         {           path: 'mycomp/xxx3',           component: MyComp         },         {           path: 'user/list',           component: UserlIst         }       ]     }    ] })

2.如上虽然利用localstorage实现了登录状态的校验。这里有个问题，如果用户在浏览器控制台手动往localstorage中添加一个token，然后就可以进入系统内的页面了。这是我们不希望的。如果想避免这种情况，必须依靠后端共同配合。即在上面判断localstorage中是否存在token，如果存在则把这个token发送到后台校验这个token是否正确，如果后台校验未通过则跳到登录界面

 // 路由判断登录 根据路由配置文件的参数 router.beforeEach((to, from, next) => {   if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限      if (localStorage.token) { // 判断当前的token是否存在，存在则放行              let validateToken=调用后端接口校验localStorage.token;           if(!validateToken){             next({             path: '/login',             query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由             });           }       next();     }     else {       console.log('需要登录');       next({         path: '/login',         query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由       })     }   }   else {     next();   } });

3.上面2步控制了未登录时，无法访问系统内的页面。但对于页面内的请求并没有控制。比如在页面上有个按钮会像后台请求接口获取数据，这时后台返回token已经过期或是token校验未通过，我们希望用户被打入登录界面，进行登录。这时要用http请求的拦截器。比如vue项目中，请求使用的vue-resource，在main.js加入如下代码：

 Vue.http.interceptors.push((request, next) => {   //为所有请求添加token头   if(localStorage.token){     request.headers.set('Authorization', "Bearer "+localStorage.token);   }    //后端响应回来，首先进入这个next的回调函数中   next((response) => {     //如果后端返回401，则认为是token验证失败，跳转到登录页面     if(response.status == 401){       router.push("/login")     }     return response   }); });

注意：vue项目对router、Vue.http等进行配置时，一定要在new Vue实例之前，否则加入的逻辑不生效

一般情况下，加1、3两步进行控制即可

文章来源: https://blog.csdn.net/join_null/article/details/91505764