import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import Login from "./views/Login.vue"; Vue.use(Router); const router = new Router({ mode: "history", base: process.env.BASE_URL, routes: [ { path: "https://www.jb51.net/", name: "home", component: Home }, { path: "/login", name: "login", component: Login }, { path: "/about", name: "about", meta: { auth: true }, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ "./views/About.vue") } ] }); router.beforeEach((to, from, next) => { if (to.meta.auth) { // 只要本地有token就认为登录了 const token = localStorage.getItem("token"); if (token) { next(); } else { // 未登录 next({ path: "/login", query: { redirect: to.path } }); } } else { next(); } }); export default router;
mock数据 或mock-easy vue.config.js
module.exports = { css: { loaderOptions: { stylus: { "resolve url": true, import: ["./src/theme"] } } }, pluginOptions: { "cube-ui": { postCompile: true, theme: false } }, configureWebpack: { devServer: { proxy: { "/api": { target: "http://127.0.0.1:3000/", changOrigin: true } }, // before(app) { // app.get("/api/login", (req, res) => { // const { username, password } = req.query; // if (username === "kaikeba" && password === "123") { // res.json({ code: 1, token: "jilei" }); // } else { // res.status(401).json({ code: 0, message: "用户名或密码错误" }); // } // }); // 中间件函数 // function auth(req, res, next) { // if (req.headers.token) { // next(); // } else { // res.status(401); 如果设置这个 只是设置状态，并没有返回前端，会导致前端等待状态 res.sendStatus(401) 这个正确的 // } // } // app.get("/api/userinfo", auth, (req, res) => { // res.json({ code: 1, data: { name: "Jerry" } }); // }); // } } } };
登录动作，store.js
index.js
import user from './user' Vue.use(Vuex) export default new Vuex.Store({ modules: {user} })
user.js
import us from '@/service/user' export default { state: { isLogin: !!localStorage.getItem("token") }, mutations: { setLoginState(state, val) { state.isLogin = val; } }, actions: { login({commit}, userInfo) { return us.login(userInfo).then(({token}) => { // code, token if (token) { // 登录成功 commit('setLoginState', true) localStorage.setItem('token', token) return true } return false }) }, logout({commit}){ localStorage.removeItem('token') commit('setLoginState', false) } } }
gitignore
.DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw*
main.js
import Vue from 'vue' import './cube-ui' import App from './App.vue' import store from './store' import router from './router' import interceptor from './interceptor' Vue.config.productionTip = false const app = new Vue({ store, router, render: h => h(App) }).$mount('#app'); interceptor(app);
深入理解令牌机制