iview-admin后台实现登录

材料
https://github.com/iview/iview-admin下载iview-admin框架
运行 npm install

其他配置
1.修改src下config下的index.js 跨域的地址

 baseUrl: {
    dev: 'http://127.0.0.1/dalaji/public/api/',     //开发环境
    pro: 'https://produce.com'                          //生产环境（运行环境）
  },

查看scr/api/user.js 里面的 url是否和后台的路由是否一致，method 的类型是否一致（不一致就404）
登录方法中的账号，密码字段需要注意可能跟你库里的字段名不一样

export const login = ({ userName, password }) => {
  const data = {
    userName,  // 账号和你数据库中的账号保持一致
    password    // 密码和你数据库中的密码保持一致
  }
  return axios.request({
    url: 'auth/login',
    data,
    method: 'post'
  })
}

3.将src/main.js这句注释（不注释你请求的不是你写的路径）

if (process.env.NODE_ENV !== 'production') require('@/mock')

store文件 登录 -退出登录-获取用户信息-存session
4.将src/store//module/user.js下的data.token改成data.access_token

查看json中token 的名字和 src/store/module/user.js  文件下的 handleLogin 方法 中commit('setToken', data.access_token)的名字是否一致
commit('setToken', data.access_token)

5.重点 state.access必须有值不能是undefined可以是空数组

commit('setAccess', data.access)
 setAccess (state, access) {
      state.access = access||[]
    },

libs文件 ajax请求配置
6.src/libs/axios.js

//引入getToken 
import { getToken } from './util'
//请求的时候带上Token
headers: {
        Authorization: getToken()
      }

7.src/libs/util.js

//将token修改为access_token
export const TOKEN_KEY = 'access_token'
//将getToken和setToken修改为下方
export const setToken = (token) => {
  if (token && token.indexOf('Bearer') === -1) token = 'Bearer ' + token
  sessionSave(TOKEN_KEY, token)
}

export const getToken = () => {
  const token = sessionRead(TOKEN_KEY)
  if (token) return token
  else return false
}
//添加修改session和读取session
export const sessionSave = (key, value) => {
  sessionStorage.setItem(key, value)
}

export const sessionRead = (key) => {
  return sessionStorage.getItem(key) || ''
}

8.就这样乱遭的登录和ajax就配置完了---真的好使，不好使绝对是你的问题！如果实在不好使你可以试试砸一下电脑让他不听话！

下面加一个请求响应拦截
在src/libs/axios

//引入
import { setToken, getToken, clearToken } from '@/libs/util'
// 响应拦截
    instance.interceptors.response.use(res => {
      this.destroy(url)
      const { data, status } = res
      return { data, status }
    }, error => {
      this.destroy(url)
      let { data, status } = error.response
      if (status === 401) {
        clearToken()
        router.push({
          name: 'login'
        })
      }
      return Promise.reject(error)
    })

在src/libs/util

export const clearToken = () => {
  sessionStorage.removeItem(TOKEN_KEY)
}

最后编辑于：2019.11.18 11:52:02