h5直播原始碼，使用者登入流程及許可權校驗

云豹科技-苏凌霄發表於2024-08-17
H5原始碼

h5直播原始碼，使用者登入流程及許可權校驗

今天我們來看一下使用者登入的流程前端部分


以一個後臺管理系統登入為例：

登入篇

1.使用者輸入賬號和密碼點選登入傳給伺服器使用者名稱和密碼

2.伺服器驗證成功後給客戶端傳遞一個token，並且把這個token存在cookies中，這樣下次再向伺服器發請求時帶上cookies就行了，即使重新整理頁面也能保持當前的狀態。
3.重定向：根據是否有token來判斷重定向，後面會在許可權篇中講到。

login

  //登入事件
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || '/', query: this.
                  otherQuery
              })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }

派發action獲取token

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

許可權篇

許可權篇實現思路

先說一說我許可權控制的主體思路，前端會有一份路由表，它表示了每一個路由可訪問的許可權。當使用者登入之後，透過 token 獲取使用者的 role ，動態根據使用者的 role 算出其對應有許可權的路由，再透過router.addRoutes動態掛載路由。但這些控制都只是頁面級的，說白了前端再怎麼做許可權控制都不是絕對安全的，後端的許可權驗證是逃不掉的。


許可權校驗流程
使用者訪問一個路由時，瀏覽器會先從Cookies獲取Token判斷Token是否存在。
如果存在：判斷路由是否為/login 如果是則重定向到 / ，如果不是，則獲取使用者角色，然後動態生成路由，訪問路由
如果不存在：檢視路由是否在白名單內，如果在則繼續訪問路由，如果不在返回 /login 並且儲存重定向。
實現程式碼

router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title) 

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      console.log(hasRoles);
      if (hasRoles) {
        next()
      } else {
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          const { roles } = await store.dispatch('user/getInfo')

          // generate accessible routes map based on roles
          //獲取路由表
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          // dynamically add accessible routes
          router.addRoutes(accessRoutes)
          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

addRoutes動態路由

以上就是h5直播原始碼，使用者登入流程及許可權校驗， 更多內容歡迎關注之後的文章

相關文章