VUE实现登录和登出

新增保存token的帮助类

// 跨域认证信息 header 名
const authorizationKey = 'Authorization'

//获取认证信息
function getAuthorization(token) {
    return sessionStorage.getItem(authorizationKey);
}
//设置认证信息
function setAuthorization(token) {
    sessionStorage.setItem(authorizationKey, token);
}
//清除认证信息
function removeAuthorization(token) {
    sessionStorage.removeItem(authorizationKey);
}

export {
    setAuthorization, removeAuthorization, getAuthorization
}

登录后把服务器的token存在本地

//设置登录信息

 setAuthorization("1111");

退出时候，调用清空Token

removeAuthorization();

路由跳转的时候判断有没有token，没有就去登录页面

//路由前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.needLogin == false) {
    //不需要登录
    next();
    return;
  }
  //没有token直接去登录页面
  if(getAuthorization()==null){
    next({path: "/login"});
    return;
  }
  next();
});

路由里面设置哪些页面不需要登录

{
      path: "/login",
      name: 'login',
      component: () => import('@/common/login/index'),
      meta: {
        //不需要登录
        needLogin: false
      }
    },

当然这这是前端的验证，后续ajax请求服务的时候，都会把这个token带到后台，通过ajax返回的结果再去判断是否需要退出登录和页面权限判断