后台管理系统的鉴权流程

最新推荐文章于 2024-09-06 10:35:08 发布

syt_1013

最新推荐文章于 2024-09-06 10:35:08 发布

阅读量501

点赞数

分类专栏： js基础文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/syt_1013/article/details/127279926

版权

js基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

if (hasToken) {
    // 有token
    // 看进入的是否是登录页面
    if (to.path === '/login') {
      // 如果是登录页面，直接放行
      next({ path: '/' })
      NProgress.done()
    } else {
      // 否则的话
      // 看一下是否有用户信息
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        // 没有就去本地拿token
        try {
          await store.dispatch('user/getInfo')
          next()
        } catch (e) {
          // token是否失效
          // 重置token，并导航至登
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    // 没有token
    // 看是否在白名单内
    if (whiteList.indexOf(to.path) !== -1) {
      // 在白名单内，放行
      next()
    } else {
      // 不在白名单内，导航到登录页面
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }

在这里插入图片描述

  const hasGetUserInfo = store.getters.user; // 获取本地用户信息
  if(to.meta.auth){
    // 说明页面需要鉴权
    if(hasGetUserInfo){
      // 进入此 if，说明有用户信息，直接放行
      next();
    } else {
      // 没有用户信息，看一下是否有 token
      const hasToken = localStorage.getItem('adminToken');
      if(hasToken){
        // 有 token，我们还需要验证一下 token 的有效性
        try{
          await store.dispatch('user/getInfo');
          next();
        } catch(error){
          await store.dispatch('user/resetToken');
          Message.error('登录过期，请重新登录');
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      } else {
        // 说明没有 token，所以需要重新进行登录
        next(`/login?redirect=${to.path}`);
        NProgress.done();
      }
    }
  } else {
    // 说明该页面不需要鉴权
    if(to.path === '/login' && hasGetUserInfo){
      // 说明你现在是在登录的状态下，要去 login 页面，我们将其导航到首页
      next({path : '/'})
    } else {
      next();
    }
    NProgress.done();
  }

store里的代码

const getDefaultState = () => {
  return {
    user : null // 存储登录后的用户的信息
  }
}
const state = getDefaultState()
const mutations = {
  SET_USER:(state, payload) => {
    state.user = payload;
  }
}
const actions = {
  // 登录
  login({ commit }, userInfo) {
    // userInfo 是用户提交的数据，接下来，我们就应该把这个数据发送到服务器
    return new Promise((resolve, reject) => {
      loginApi(userInfo).then(res => {
        const { data } = res;
        if (data) {
          // 说明 data 里面有数据
          commit('SET_USER', data);
          resolve();
        } else {
          reject(res)
        }
      }).catch(error => {
        reject(error);
      })
    })
  },

  // 恢复登录状态
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo().then(res=>{
        if(typeof res === 'string') {
          // 未登录，或者token已经过期
          res = JSON.parse(res);
          if (res.code === 401) {
            reject(res.msg);
          }
        } else {
          // 说明这个 token 是 OK 的，将用户信息放入到仓库
          commit('SET_USER', res.data);
          resolve()
        }
      })
    })
  },
}