手把手写登录权限动态路由（一）

一、准备

1. 安装element
2. 安装axios
3. 安装js-cookie
4. 安装nprogress
5. 安装jsencrypt

二、目录结构

三、接口封装

1. 创建目录(src→utils→request.js)

import axios from 'axios'
import {getToken} from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://xxxxxx:7120',
  timeout: 900000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    if(getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    config.headers['Content-Type'] = 'application/json'
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

2. 创建目录(src→api→user.js)

import request from '@/utils/request'
export function login(data){
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

四、登录界面(基础搭建)

1. 创建目录(src→router→index.js)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  }
]
export default new Router({
  mode:'history',
  scrollBehavior: () => ({y : 0}),
  routes: constantRouterMap
})

2. 创建目录(src→store→moudles→user.js)

import { login } from '@/api/user'
import { setToken} from '@/utils/auth'

const user = {
  state: {
    token: getToken(),
    user: {},
    roles: [],
    // 第一次加载菜单时用到
    loadMenus: false
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const {roleId, username, password} = userInfo
      return new Promise((resolve, reject) => {
        login({roleId:roleId,username:username,password:password}).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

export default user

3. 创建目录(src→store→getters.js)

const getters = {
  token: state => state.user.token
}
export default getters

4. 创建目录(src→store→index.js)

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import permission from './modules/permission'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
  },
  getters
})

export default store

5. 创建目录(src→views→login)

// 触发登录接口
methods:{
    handleLogin(){
      this.$store.dispatch('Login',this.loginForm)
    }
  }

以上基础登录完毕，接下来登录权限，根据用户角色登录