Write the Code. Change the World.

9月 18

这里的登录和传统的登录有一点不一样,传统的登录提交账号密码,正确就可以了。这里得先请求 /sanctum/csrf-cookie,再进行登录请求。

操作一波

在 vue element admin 目录中,先修改前端页面。

src/api/user.js 中增加:

export function csrfCookie() {
  return request({
    url: '/sanctum/csrf-cookie',
    method: 'get'
  })
}


修改src/utils/validate.js

# 先偷懒一会,不去做任何检查,直接返回 true
export function validUsername(str) {
  return true;
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

修改
src/store/modules/user.js

# token 先随便写一波,我们也不会用到
const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      csrfCookie().then(res => {
        login({ account: username.trim(), password: password }).then(response => {
          const data = response
          data.token = 'abcdefghigklmnopqrstuvwxyz'
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      }).catch(error => {
        reject(error)
      })
    })
  },

到此,登录已经完成。登录成功后,vue element admin 逻辑会去调用 user/info 接口,成功再次一举。如果能成功获取到数据,说明是请求没问题。然后你不使用 csrfCookie,再去请求 user/info 试试。或用 postman 单独请求试试,如果依然可以请求成功,那就太伤心了,说明 sanctum 是假的,没起到作用。当然是可行的,毕竟是官方推荐的成熟的东西。如果哪里有问题,就是某一个环节使用出问题了。

请求虽然成功了,逻辑需要修改。
修改 src/store/modules/user.js

  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const data  = { roles: ['admin'], ...response} 
        data.name = data.nickname;
        data.introduction = data.signature;
        if (!data) {
          reject('Verification failed, please Login again.')
        }

再 build,再跑看看。

npm run build:prod

通过下边这两个图,就可以看明白了。

最后

用户状态(登录这些已经ok了),可是 vue element admin 这个默认带了太多的 view,其实,我们在刚拉下来的时候就应该删掉的。下一步,我们删掉那些我们不需要的,再开始干其他事。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

5 条留言
  1. 抖M

    大神!非常感谢这个帖子。太有帮助了
    但是我现在卡在登陆了。。。。。点击登陆后,后台已经登陆了。cookie什么的也都获得了。但是前台不跳转。用户信息也都获取到了。刷新后也是能再次获取的。但是就是进不到前端的dashboard以及任何其他页面。请问有什么头绪么?万分感谢!

    1. 一只萌萌哒博主

      vue template admin 的 permission 那块状态管理,以及其自身的权限有问题么。就算这样,也不应该是白白的。

      1. 一只萌萌哒博主

        权限有两方面的意思,一是看得见的,比如看得见的侧边栏渲染。还有一个是看不见的,比如请求。后端逻辑中间件对角色权限进行控制,然后丢给前端去渲染,这样既方便又安全。不过,这样做前后端都熟悉才好。

  2. 天然呆

    大佬,不是已经采用 cookie了吗?为什么info请求还要带token呢?
    不知道大佬有没有研究vue-element-admin 来管理passport的client?