vue项目实现登录(sessionStorage 存储 token)

前提参考：vue项目封装axios

思路：
// 1, 前端校验，校验成功后向后台传用户名和密码（每次请求接口都要传 token）
// 2， 后端收到请求，验证用户名和密码，验证成功，生成 token 返回给前端
// 3， 前端拿到token，将token存储到sessionStorage
// 4， 跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
// 5， 后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
// 6， 如果前端拿到状态码为401/退出登录，就清除token信息并跳转到登录页面

request.js

//http request 拦截器
instance.interceptors.request.use(
    config => {
        let token = sessionStorage.getItem('token')
        if(token == null){
            // 首次登录
            config.headers.client_id = 'jeecp'
            config.headers.client_secret = 'webApp'
        }else{
            config.headers.Authorization = 'Bearer '+ token
        }
        return config
    },
    err => {
        return Promise.reject(err)
    }
)

api.js

// 登录
    loginInfor(Information){
      return post('/api-auth/oauth/user/token' ,
        {
          username: Information.username,
          password: Information.password,
        }
      )
    },

登录前端页面

路由 index.js

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 从哪里跳转来
  // next 放行
  //跳转到登录页面直接放行
  if (to.path === '/login') {
    next();
  } 
  else {
    // 获取token,看是否有token,有token放行
    const token = window.sessionStorage.getItem("token")
    if (!token) {
      next('/login')
      return;
    } else{
      // 放行
      next();
    }
    
  }
});